Canvas标签width属性和css的width属性
本篇只是一个渣渣写的笔记，要说的都在代码中的注释中，在我看来不求甚解的话没准根本不知道两者的区别更好
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas标签width属性和css的width属性</title> <style type="text/css"> .mycanvas { border: 1px dashed red; } #three{ width: 600px; height: 300px; } #four{ width: 400px; height: 400px; } </style> </head> <body> <!--<canvas> 标签只有两个属性—— width和height--> <!--在css中设定宽高与在标签属性中设置宽高是不一样的--> <canvas id="one" class="mycanvas">your browser do not support canvas</canvas> <canvas id="two" class="mycanvas" height="300" width="300">your browser do not support canvas</canvas> <canvas id="three" class="mycanvas">your browser do not support canvas</canvas> <canvas id="four" class="mycanvas">your browser do not support canvas</canvas> <script> function cone() { //如果没有给canvas指定高宽，canvas默认高宽（或者说坐标属性）是300*150 //所以这里是一条对角线 var c = document.getElementById("one"); var cv = c.getContext('2d'); cv.moveTo(0, 0); cv.lineTo(300, 150); cv.stroke(); }; cone(); function ctwo(){ //如果在标签属性设置width和height则表示更改了canvas画布本身的坐标属性（！important 指不会拉伸canvas） //此处名为two的canvas宽高为300*300 //这里画的一条线应还是对角线 var c = document.getElementById("two"); var cv = c.getContext('2d'); cv.moveTo(0,0); cv.lineTo(300, 300); cv.stroke(); } ctwo(); function three(){ //！important css中设定宽高只是设定了canvas本身这个dom元素的宽高，与画布本身坐标属性无关 //画布本身坐标属性在标签属性中未生命所以应该还是300*150 //这里css中按照比例扩大了一倍，只是把坐标本身从视觉上扩大一倍,最大坐标不变(为声明300*150) //所以这里仍未对角线 var c = document.getElementById("three"); var cv = c.getContext('2d'); cv.moveTo(0,0); cv.lineTo(300, 150); cv.stroke(); } three(); function four(){ //如果css和本身的坐标属性不成比例呢(可是为什么会有这种情况，不是自找麻烦么.) //坐标属性和dom宽高本身无关，所以这里应该还是对角线，但是是视觉错误的(坐标的单位长度不同) //应该说这个画布的横坐标最大还是300但是对应长度是400px,坐标的单位长度为400/300(px),纵坐标最大还是150但是对应长度为400px，坐标的单位长度为400/150(px) //看一下(100,100)就知道了 var c = document.getElementById("four"); var cv = c.getContext('2d'); cv.moveTo(0,0); //此处应该还是对角线 //cv.lineTo(300, 150); //数据上的对角线，视觉上应该是竖比横长 cv.lineTo(100, 100); cv.stroke(); } four(); //个人总结：费那个劲干啥，直接不要管css中的数字。js写的时候只看标签内有没有width和height属性应该就是不会出错的 </script> </body> </html>
