本篇只是一个渣渣写的笔记，要说的都在代码中的注释中，在我看来不求甚解的话没准根本不知道两者的区别更好
<!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>
时间： 2024-10-12 23:59:16