本篇只是一个渣渣写的笔记，要说的都在代码中的注释中，在我看来不求甚解的话没准根本不知道两者的区别更好
<!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>Canvas标签width属性和css的width属性
原文地址：http://www.cnblogs.com/sure666/p/7600672.html