canvas画布的宽高设定为什么不能用css设置-解析
程序员文章站
2022-05-24 21:30:09
...
1、仅将样式设置在css中的到的是拉伸的图 是错误的
2、仅在canvas中设置宽高属性 正确
3、仅 使用js设置宽高属性 正确
总结
正确的情况是一条45度倾斜从（10,10）到（200,200）的直线，但是显示的效果变形了
<canvas >中有默认宽高300px*150px，如果在<canvas>标签中没有设定宽高，那么浏览器就会取默认值并进行拉伸，实际上我们在css中定义的宽高并没有生效，所以会出现变形的情况。
正确的写法应该是在<canvas>中设定所需宽高。注意：
js中设置时不要写成 canvas.style.width，那样等于是设置了css，仍然会被拉伸。
设置的值 也不能加单位 如 200 px 不然也是错误的 也就是设置了css 错误的方式
错误
canvas.style.width=200px;
canvas.style.height='200px';
正确
canvas.width=200;
canvas.height=200;canvas画布宽高只能通过数值设定，不能使用百分比，也不需要单位。
附完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas基础-绘制矩形</title>
<style>
*{
padding: 0;
margin: 0;
}
#canvas{
border: 1px solid rebeccapurple;
/* width: 500px;
height: 500px; */
}
</style>
</head>
<body>
<!--
默认透明，
默认宽300 高150 像素，
注意事项：不要使用css设置canvas的宽和高。
同时画布是透明的png，默认画布上的点、线、文字色 都是黑色
坐标系：下和右是坐标系正方向 。
canvas 是画布，所以也是图片
width
height
也可以使用js指定画布的宽和高
-->
<canvas id="canvas" width="500" height="400">您的浏览器不支持canvas，请升级</canvas>
<script>
// 获取元素
let canvas = document.getElementById('canvas');
// 可以用js设置 但不要加style.width 这样又成css了
// canvas.width = 500;
// canvas.height = 500;
//获取画笔对象（ 画布的上下文环境对象 ）
let ctx = canvas.getContext('2d');
console.log(canvas.getContext,ctx);
//绘制一个矩形 画笔对象上肯定有一个绘制矩形的功能函数 fillRect() 填充一个矩形 strokeRect 描边一个矩形
// fillRect(x,y,width,height)
ctx.moveTo(10,10);
ctx.lineTo(200,200);
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.stroke();
</script>
</body>
</html>
上一篇： Android与屏幕有关的知识点(一)
下一篇： RN入门基础5：指定/弹性宽高