2-3问题
来源：2-3 canvas事件操作
hope是希望的意思啦
2018-03-12 23:26:06
想问下老师，为什么2-3我照着老师的步骤一步一步敲得代码，结果视频结束后老师的代码可以画出圈圈，我的就不行。我检查了一下，console.log(po);返回的值是NAN,有些搞不懂了。请问老师到这一步为止，我的哪里错了。
<!--HTML部分-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=no">
<title>手势解锁</title>
<style type="text/css">
body{background-color: lightblue;text-align: center;}
h3{color:#22c3aa}
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
new canvaslock({chooseType:3}).init();
</script>
</body>
</html>
<!--JS部分-->
(function(){
window.canvaslock = function(obj){ //全局变量
this.height = obj.height;
this.width = obj.width;
this.chooseType = obj.chooseType;
};
//js方式动态生成dom
canvaslock.prototype.initDom = function(){
var wrap = document.createElement('div'); //动态生成了一个div
var str = '<h3 id="title" class="title">绘制解锁图案</h3>';
wrap.setAttribute('style','position:absolute;top:0;left:0;bottom:0;right:0;'); //给div生成了一些样式
var canvas = document.createElement('canvas'); //动态生成canvas
canvas.setAttribute('id','canvas'); //给canvas生成了一个id
canvas.style.cssText = 'background-color:transparent;display:inline-block;margin-top:15px;';
wrap.innerHTML = str; //把h3标签放到了div中
wrap.appendChild(canvas); //canvas生成到div当中
var width = this.width || 300; //这两个this.height和this.width和上面第三四行的this.height
var height= this.height || 300; //当this.width没有值的时候就等于300
document.body.appendChild(wrap); //把div放到body里
//高清屏播放
canvas.style.width = width + "px";
canvas.style.height = height + "px"; //样式高度，所以会拉伸（想象成里面的宽高）
canvas.width = width;
canvas.height = height; //默认高度（想象成外面的宽高）
}
canvaslock.prototype.drawCle = function(x,y){ //画圆函数
this.ctx.skrokeStyle = '#CFE6ff';
this.ctx.lineWidth = 2;
this.ctx.beginPath();
this.ctx.arc(x,y,this.r,0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.stroke();
}
canvaslock.prototype.createcircle = function(){ //计算生成9个坐标点
var n = this.chooseType; //n是指行
var count = 0;
this.r = this.ctx.canvas.width / (2 + 4 * n); //计算公式 一行3个圆，会有14个元，这个计算了每个圆的半径
this.lastPoint = []; //存放选中的圆圈的x、y的坐标值
this.arr = [];
this.restPoint = [];
var r = this.r;
for(var i=0;i<n;i++){ //计算每个圆的坐标
for(var j=0; j<n;j++){
count++;
var obj = {
x: j*4*r + 3*r,
y:i*4*r + 3*r,
index:count //索引
};
this.arr.push(obj);
//this.restPoint.push(obj);
}
}
this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
for(var i=0;i<this.arr.length;i++){
this.drawCle(this.arr[i].x,this.arr[i].y);
}
//return arr;
}
//程序初始化
canvaslock.prototype.init = function(){
this.initDom(); //js方式动态生成h3和canvas标签
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.touchFlag = false;
this.createcircle();
this.bindEvent();
}
canvaslock.prototype.bindEvent = function(){
var self = this;
this.canvas.addEventListener("touchstart",function(e){
//touchstart判断是否点击的位置处于圆内getPosition，处于则初始化lastpoint和restpoint
e.preventDefault();
var po = self.getPosition(e); //po有x和y，并且是相较于canvas边距
console.log(po);
for(var i=0;i<self.arr.length;i++){ //判断是否在圆内的原理：多出来的这条X/Y < r ，则在圆内
if(Math.abs(po.x - self.arr[i].x) > self.r && Math.abs(po.y - self.arr[i].y) < self.r){
self.touchFlag = true; //当手指在圆圈以内，设置为真，则touchmove就被开启
self.lastPoint.push(self.arr[i]); //lastpoint存放选中的圆圈的x、y的坐标值
self.restPoint.splice(i,1);
break;
}
}
},false);
this.canvas.addEventListener("touchmove",function(e){ //touchmove做的就是：画圆drawPoint和划线drawLine
if(self.touchFlag){
self.update(self.getPosition(e));
}
},false);
this.canvas.addEventListener("touchend",function(e){
},false);
}
canvaslock.prototype.getPosition = function(e){
var rect = e.currentTarget.getBoundingClientRect //getBoundingClientRect用于获取某个元素相对于视窗的位置集合。 获取到canvas到屏幕的聚点
var po ={
x:(e.touches[0].clientX - rect.left)*this.devicePixelRatio, //rect.left是canvas到屏幕的左边 clientX是手指点到的位置距离屏幕的距离 两个相减是手指到canvas的距离
y:(e.touches[0].clientY - rect.top)*this.devicePixelRatio
};
return po;
}
canvaslock.prototype.update = function(po){
this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx,canvas.height); //canvas画布清空
for(var i=0; i< this.arr.length ; i++){ //重画九个圆
drawCle(this.arr[i].x,this.arr[i].y);
}
this.drawPoint(); //画圆
this.drawLine(po); //画线
}
canvaslock.prototype.drawLine = function(po, lastPoint){
this.ctx.beginPath();
this.ctx.lineWidth = 3;
this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);
for(var i=0;i<this.lastPoint.length;i++){
this.ctx.lineTo(this.lastPoint[i].x,this.lastPoint[i].y);
}
this.ctx.lineTo(po.x,po.y); //到po我们点中的那个点
this.stroke();
this.ctx.closePath();
}
canvaslock.prototype.drawPoint = function(){
for(var i=0;i<this.lastPoint.length;i++){
this.ctx.fillStyle = '#cfe6ff';
this.ctx.beginPath();
this.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r /2, 0,Math.PI*2,true);
this.ctx.closePath();
this.ctx.fill();
}
}
})()
1回答
-
一路电光带火花
2018-03-13
这么多代码。。。。你肯定有哪写错了，建议你先理解课程中的代码内容，理解了再跟着去敲，这样即使出问题，你也好定位到问题所在，盲目的跟着敲，确实不好找问题。
0
