今天讲的内容是canvas.width和canvas.style.width的区别,在没有做canvas项目之前,其实我是并没有深入了解过这两个属性的,最近在研究canvas项目的自适应问题,尤其是在canvas中置入图片,碰到了图片模糊的问题,这些“杂症”都是和文章要讲的canvas.width/canvas.style.width有关系。
canvas.width/canvas.style.width概览
先看一下这个例子:https://codepen.io/parkeeers/...
<canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px">
</canvas>
<canvas id="diagonal2" style="border:1px solid;width:200px;height:200px;"
width="100px" height="100px">
</canvas>
<canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;">
</canvas>
<canvas id="diagonal4" style="border:1px solid">
</canvas>
// JavaScript
function drawDiagonal(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();
}
window.onload = function() {
drawDiagonal("diagonal1");
drawDiagonal("diagonal2");
drawDiagonal("diagonal3");
drawDiagonal("diagonal4");
}
效果图
- 我们来看第一个canvas,指定了canvas的大小,并未指定canvas.style的大小,那么画布就是实实在在是100*100大小,我们JS代码中,也是在画一条从(0,0)到(100, 100)的对角线。第一个完全没有问题
- 第二个canvas,canvas本身以及canvas.style都进行了定义,从定义可以看到canvas.style就是在将我们的画布放大2倍,从图也能看到,这条线指向对角没问题,但是变粗了,这也证明了,canvas先是参考自己的本身画布大小进行绘制,绘制完毕,由style指定的大小,渲染在浏览器页面
-
第三个canvas,本身的canvas与canvas.style不成比例,html中并没有显示的声明canvas本身的大小,只声明了style的大小,那么这种情况下,canvas画布本身的大小就是默认值
300*150
;那么我们依托300*150
进行绘制,就像第四个纯净的canvas上的线条一样绘制,绘制完毕后,要渲染到页面,这个时候,还是和canvas2那个套路一样,依据style指定的width,height进行缩放,状态就由第四个canvas变成了第三个最后的样子。我们来看一下公式:
默认大小300*150
,style指定大小200*200
最后标准位置下的(100,100)就变成了在style下
200*200
的(66.7, 133.333) - 最后一幅图就是当不指定canvas大小时,默认的大小,标准的300*150
总结:举了三个不同但是互相关联的例子,通过这些,我们能了解,canvas本身是一个画布,我们怎么理解画布,决定了我们是否能正确的理解canvas.width和canvas.style.width的区别。canvas.width就是画布真实的大小,这个画布不是我们能看到的画布,我们能看见的画布,已经是在浏览器处理canvas.style.width/canvas.style.height之后,加工处理后的画布。而cavnas.style.width/canvas.style.height决定了画布以怎样的形式进行缩放展示给页面。转换的比例就是上面两个公式。最后,当我们不指定canvas的真实大小时,默认按照300*150处理。
- canvas.width / canvas.height 表示画布真实大小,其实我们并不可见
- canvas.style.width / canvas.style.height 表示画布输出到浏览器我们可见的/最终的大小
- 不提供canvas真实大小时,默认按
300*150
处理,如果canvas.style也没提供,那么style.width为空,注意并不是300*150
canvas图片模糊的问题(待完善)
再讲canvas图片模糊的问题之前,我们可以看一下上面第二个canvas,真实大小与样式指定的大小是呈2倍关系,最后我们的线条也是放大2倍,大家要注意一个概念,canvas绘制是以自己真实大小来定位&绘制的,最后由浏览器渲染到页面可见时,由canvas.style.width/cavnas.style.height决定的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。