问题描述
第一次使用canvas画图,并且不是从浏览器左上角(0,0)点开始画,结果发现笔迹等都存在,但画布中没有显示。
1、首先第一个问题,通过fillRect画出来的应该是个300*300的正方形。实际得到的是大概600*300的矩形。
2、第二个问题,mousemove监听被触发,lineTo和stroke都被执行,但是话不中没有笔迹。
<div id="canvas-box">
<canvas id="canvas"></canvas>
</div>
<style>
canvas {
background-color: #F5F5F5;
width: 300px;
height: 300px;
}
#canvas-box {
width:400px;
height: 400px;
margin: 50px auto;
background: red;
}
</style>
<script>
this.canvas = document.querySelector("#canvas");
this.ctx = this.canvas.getContext("2d");
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "#f5f5f5";
this.ctx.lineWidth = 10;
this.ctx.fillRect(0, 0, 300, 300);
this.canvas.addEventListener("mousedown", evt => {
this.ctx.beginPath();
this.ctx.moveTo(evt.pageX, evt.pageY);
this.canvas.addEventListener("mousemove",this.bindMousemoveHandler(), false);
}, false);
this.canvas.addEventListener("mouseup", () => {
this.canvas.removeEventListener("mousemove",this.bindMousemoveHandler(), false);
}, false);
bindMousemoveHandler: function() {
if(!this._bindedFun) {
this._bindedFun = this.canvasMousemoveHandler.bind(this);
}
return this._bindedFun;
},
canvasMousemoveHandler: function(evt) {
this.ctx.lineTo(evt.pageX, evt.pageY);
this.ctx.stroke();
},
</script>
原因分析:
1、首先通过打印确认笔迹点的位置是否正确。发现lineTo的时候(x,y)的取值不对。pageX和pageY是按照浏览器左上角为初始坐标计算的。而我的画布并不是从左上角开始的。推测两个笔迹使用了,以左上角为初始坐标计算出来的(x,y)在我的画布上画。排查鼠标事件回调中的其他参数使用offset系列的参数来画。mousedown中开始坐标的点位也要调整。
this.canvas.addEventListener("mousedown", evt => {
this.ctx.beginPath();
this.ctx.moveTo(evt.offsetX, evt.offsetY);
this.canvas.addEventListener("mousemove",this.bindMousemoveHandler(), false);
}, false);
canvasMousemoveHandler: function(evt) {
this.ctx.lineTo(evt.offsetX, evt.offsetY);
this.ctx.stroke();
},
开始试验在画布上操作,发现笔迹出现,但是并没有贴合鼠标轨迹。打印一下当前的canvas。自己查找发现,canvas当前的大小并不是我样式中设置的300*300,而是300*150。猜测重置canvas大小比例失效了。会不会是css并不会修改canvas的大小比例呢,把css中的宽高取消掉。尝试其他方式修改。
<canvas id="canvas" width="300px" height="300px"></canvas>
发现页面展示fillRect有变化。是一个300*300的正方形了。尝试画一下。发现笔迹正常。再次打印canvas,发现canvas的大小变成300*300了。
把内联样式删除,再换一种方式尝试一下。
this.canvas = document.querySelector("#canvas");
// 新增下面两行赋值
this.canvas.width = 300;
this.canvas.height = 300;
this.ctx = this.canvas.getContext("2d");
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "#f5f5f5";
this.ctx.lineWidth = 10;
// 调整赋值
// this.ctx.fillRect(0, 0, 300, 300);
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
验证发现笔迹也是正常的。
得出结论,canvas的大小只能使用内联样式或者使用js赋值更改。使用css修改是无效的。