Canvas坐标轴中的Y轴距离是X轴的两倍

如题，相信很多人在初次玩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             /*width: 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的大小还得在属性中定义。
以上
posted @ 2017-03-28 09:18  rookieM  阅读(1187)  评论(0)  编辑  收藏  举报