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

最新推荐文章于 2024-09-11 15:33:18 发布

KELION1234

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量198

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/WhiteM/p/6631821.html

版权

如题，相信很多人在初次玩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>