关于Canvas画布大小问题

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