1.canvas大小默认为300X150
<canvas id="myCanvas" style=" background-color: rgb(218, 108, 108);"></canvas>
<script>
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext("2d");
context.fillRect(0, 0, 100, 100);
</script>
2.错误的设置宽高,导致画布内内容变形
1)内联样式
<canvas style="width:450px;height:300px;"></canvas>
2)内部样式
<style type="text/css">
#myCanvas {
width: 450px;
height:300px;
}
</style>
3)外部样式
<--canvas.css代码-->
#myCanvas {
width: 450px;
height:300px;
}
<-- 引入html中-->
<link rel="stylesheet" href="canvas.css" />
...
<canvas id="myCanvas"></canvas>
这是因为,使用css设置画布的大小会导致画布按比例缩放你设置的值。(css只是设置canvas在屏幕的显示大小)
3.正确设置画布宽高的方式
//方法一
<canvas width="450" height="350"></canvas>
//方法二:通过js实现
<canvas id="myCanvas"></canvas>
<script>
var ele = document.getElementById("myCanvas);
ele.width="450";//注意:没有单位
ele.height="300";//注意:没有单位
var context= ele.getContext("2d");
context.fillStyle="red";
context.fillRect(0,0,100,100);
</script>
学习自:https://www.cnblogs.com/yanglongbo/articles/9787779.html