如题，相信很多人在初次玩canvas的时候会出现这样的情况，跟着教程走的情况下，诶
怎么画出来的东西，不怎么对劲啊，,,ԾㅂԾ,,！！！！！先上代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 #canvas { 16 border: 1px solid #000; 17 display: block; 18 margin: 10px auto; 19 width: 300px; 20 height: 300px; 21 } 22 #canvas2 { 23 /*border: 1px solid #000;*/ 24 display: block; 25 margin: 10px auto; 26 /* 300px; 27 height: 300px;*/ 28 } 29 #canvas3 { 30 border: 1px solid #000; 31 display: block; 32 margin: 10px auto; 33 width: 300px; 34 height: 300px; 35 } 36 </style> 37 </head> 38 39 <body> 40 41 <canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 42 43 </canvas> 44 <canvas id="canvas3"></canvas> 45 <script type="text/javascript"> 46 47 48 var canvas2 = document.getElementById("canvas2"); 49 var content2 = canvas2.getContext("2d"); 50 51 content2.beginPath(); 52 // rect(x,y,width,height) 53 // 以0,0为原点，设置宽100，高100的矩形 54 content2.rect(0,0,100,100); 55 content2.stroke(); 56 57 var canvas3 = document.getElementById("canvas3"); 58 var content3 = canvas3.getContext("2d"); 59 60 content3.beginPath(); 61 // rect(x,y,width,height) 62 // 以0,0为原点，设置宽100，高100的矩形 63 content3.rect(0,0,100,100); 64 content3.stroke(); 65 66 </script> 67 </body> 68 69 </html>
再上效果图
两段代码都是一样的，为什么会出现自己画的矩形，高是宽的两倍呢！！！
我在网上找了以下，发现有人是这么解释的
attr设置的height/width（比如<canvas height=100/>），是实际有多少像素；
而通过css设置的height，表示显示出来的大小，并不会影响原本的像素数。
你的css的height和真实的height不匹配的话，就会出现scale（缩放扩大）的问题
可以从我的两段代码中看出来
<canvas id="canvas2" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="canvas3"></canvas>
我自己的写的样式是在CSS里面，而教程里的代码是直接写在canvas里面的
也就是说css定义的样式只是外观，canvas的大小还得在属性中定义。
以上