1 canvas 必须认识到的大坑
2 <!-- 重点：
3 在js/canvas标签中定义的宽和高是画布实际的宽和高。
4 在样式表中定义的宽和高是画布缩放后的宽和高。
5 即：把js/canvas实际大小缩放到css中的宽高即可。浏览器中显示的效果是css中设置的宽高。
6
7 一，没有设置canvas宽高，默认是300px*150px。设置canvas在浏览器中的实际宽高，必须在canvas标签或者使用js进行设置。而使用css进行设置的宽高是进行缩放后大小，与实际位置不同。
8
9 1，<canvas id="mycanvas" class="mycanvas" width="200px" height="200px">您的浏览器不支持canvas标签</canvas>
10 2， var mycanvas = document.querySelector("#mycanvas");
11 var ctx = mycanvas.getContext('2d');//2d画布环境
12 mycanvas.width=400; //这里没有单位
13 mycanvas.height=300; //这里没有单位
14 -->
15 <!DOCTYPE html>
16 <html lang="en">
17 <head>
18 <meta charset="UTF-8">
19 <title>canvas的坑</title>
20 <style>
21 .mycanvas{background: #ccc;width: 500px;height: 500px;}
22 .mycanvas1{
23 background: yellow;
24 /*这里的设置的宽高等价于把canvas默认宽高300*150 进行缩放至 100*100。
25 所以在js中 从(0,0)到(100,100)之间画一条直线，这两个点也按照300*150进行缩放，再画直线*/
26 width: 200px;
27 height: 200px;
28 }
29 </style>
30 </head>
31 <body>
32 <canvas id="mycanvas" class="mycanvas">您的浏览器不支持canvas标签</canvas>
33 <script type="text/javascript">
34 var mycanvas = document.querySelector("#mycanvas");
35 var ctx = mycanvas.getContext('2d');//2d画布环境
36 mycanvas.width=100;//在页面中实际大小
37 mycanvas.height=100;//在页面中实际大小
38 ctx.moveTo(0,0);
39 ctx.lineTo(100,100);
40 ctx.stroke();
41 </script>
42
43 <canvas id="mycanvas1" class="mycanvas1">您的浏览器不支持canvas标签</canvas>
44 <script type="text/javascript">
45 var mycanvas1 = document.querySelector("#mycanvas1");
46 var ctx1 = mycanvas1.getContext('2d');//2d画布环境
47 ctx1.moveTo(0,0);
48 ctx1.lineTo(100,100);
49 ctx1.stroke();
50 </script>
51 </body>
52 </html>
53
54 ===========
55
56 ctx.beginPath(); 清除之前在内存中预先画的路径，重新开始预先画路径，直到ctx.stroke()才会真正在页面中画出路径
57
58 重点：ctx.beginPath();实例一：
59 <!DOCTYPE html>
60 <html lang="en">
61 <head>
62 <meta charset="UTF-8">
63 <title>canvas</title>
64 <style>
65 .mycanvas{background: #ccc;}
66 </style>
67 </head>
68 <body>
69 <canvas id="mycanvas" class="mycanvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>
70 <script>
71 var canvas = document.querySelector("#mycanvas");
72 var ctx = canvas.getContext("2d");//2d环境
73 //moveTo(0,0) 到 ctx.lineTo(100,200) 只是在内存中预先画的路径，并没有画出来。
74 ctx.moveTo(0,0);
75 ctx.lineTo(100,100);
76 ctx.lineTo(100,200);
77 ctx.strokeStyle = "red";
78 ctx.stroke();//已经画一次
79
80 //ctx.beginPath(); 作用：清除之前在内存中预先画的路径，重新开始预先画路径。
81 //如果注释该代码，那么上面的路径在内存中会被再画一次。再继续画下面的路径。
82 //到了最后的ctx.stroke()时，就会把内存中预先画好的路径全部画出来。
83 ctx.beginPath();
84 ctx.moveTo(100,0);
85 ctx.lineTo(200,100);
86 ctx.lineTo(200,200);
87 ctx.strokeStyle = "green";
88 ctx.stroke();//画出内存中预先画好的路径。
89 </script>
90 </body>
91 </html>
92
93
94 重点：
95 ctx.beginPath() 和 ctx.closePath() 不一定要成对出现，因为意义完全不同。
96
97 canvas 模板：
98 var canvas = document.querySelector("#mycanvas");
99 var ctx = canvas.getContext("2d");//设置绘画2d环境
100 ctx.beginPath(); 清除之前在内存中预先画的路径，重新开始预先画路径，直到ctx.stroke()才会真正在页面中画出路径
101 .........(具体画什么图形)
102 ctx.closePath();//自动闭合起点和终点，不一定要有，需要闭合路线才写。
103 ctx.strokeStyle="#d36";//设置路线颜色
104 ctx.stroke();//把内存中的路径全部画在网页中
105
106 //画线
107 ctx.beginPath(); 清除之前在内存中预先画的路径，重新开始预先画路径，直到ctx.stroke()才会真正在页面中画出路径
108 ctx.moveTo(50,500);
109 ctx.lineTo(100,300);
110 ctx.lineTo(300,600);
111 ctx.closePath();//自动闭合起点和终点
112 ctx.strokeStyle="#d36";//设置路线颜色
113 ctx.stroke();//把内存中的路径全部画在网页中
114
115 // 画圆 ctx.arc(x,y,r,开始弧度,终止弧度,true逆时针画/flase顺时针画);
116 // ctx.arc(圆点x轴坐标,圆点y轴坐标,圆的半径,开始弧度,终止弧度,true逆时针画/flase顺时针画);
117
118 // 画矩形 rectangle 英 [ˈrektæŋɡl] 矩形
119 // ctx.strokeRect(x,y,width,height);该方法是已经封装好了的，不用ctx.beginPath(),ctx.closePath(),ctc.stroke();
120 // ctx.strokeRect(矩形起始点x轴坐标,矩形起始点y轴坐标,矩形宽,矩形高);
121 ctx.strokeStyle="purple";
122 ctx.strokeRect(200,200,300,100);
123
124
125 <!DOCTYPE html>
126 <html lang="en">
127 <head>
128 <meta charset="UTF-8">
129 <title>canvas</title>
130 <style>
131 .mycanvas{background: #ccc;}
132 </style>
133 </head>
134 <body>
135 <canvas id="mycanvas" class="mycanvas" width="600px" height="600px">您的浏览器不支持canvas</canvas>
136 <script>
137 var canvas = document.querySelector("#mycanvas");
138 var ctx = canvas.getContext("2d");//2d环境
139 //moveTo(0,0) 到 ctx.lineTo(100,200) 只是在内存中预先画的路径，并没有画出来。
140 ctx.moveTo(50,250);
141 ctx.lineTo(250,250);
142 ctx.strokeStyle = "green";
143 ctx.stroke();
144 ctx.beginPath();//如果从新开始话，必须清除之前内存中预画的路径
145 ctx.moveTo(250,250);
146 ctx.lineTo(150,50);
147 ctx.strokeStyle = "yellow";
148 ctx.stroke();
149 ctx.beginPath();//如果从新开始话，必须清除之前内存中预画的路径
150 ctx.moveTo(150,50);
151 ctx.lineTo(50,250);
152 ctx.strokeStyle = "red";
153 ctx.stroke();
154
155 //画线
156 ctx.beginPath();//清除内存中预画好的路径，从新开始预画路径。
157 ctx.moveTo(50,500);
158 ctx.lineTo(100,300);
159 ctx.lineTo(300,600);
160 ctx.closePath();//自动闭合起点和终点
161 ctx.strokeStyle="#d36";
162 ctx.stroke();
163
164
165 // 画圆 ctx.arc(x,y,r,开始弧度,终止弧度,true逆时针画/flase顺时针画);
166 // ctx.arc(圆点x轴坐标,圆点y轴坐标,圆的半径,开始弧度,终止弧度,true逆时针画/flase顺时针画);
167 ctx.beginPath();
168 ctx.arc(200,400,50,0,2*Math.PI,true);
169 ctx.closePath();
170 ctx.strokeStyle="#00d";
171 ctx.stroke();
172
173 // 画矩形 rectangle 英 [ˈrektæŋɡl] 矩形
174 // ctx.strokeRect(x,y,width,height);
175 // ctx.strokeRect(矩形起始点x轴坐标,矩形起始点y轴坐标,矩形宽,矩形高);
176 ctx.strokeStyle="purple";
177 ctx.strokeRect(200,200,300,100);
178 </script>
179 </body>
180 </html>
181
182 ===========
183
184 重点：描边 与 填充
185 二者可以一起使用，除了已经封装好的矩形ctx.strokeRect(x,y,w,h);
186 // 先描边再填充，填充会覆盖描边的颜色
187 // 如果是先填充再描边，描边会覆盖填充。
188 // 即后者会覆盖前者的。
189
190 给路径或图形填充颜色话，如果不设置颜色的话，默认颜色是黑色，如果要设置颜色的话，要写设置颜色，然后再调用fill方法。这里的#00f就是蓝色
191
192 //描边样式
193 ctx.strokeStyle="#f0f";//必须写在stroke()方法之前，之后的无效
194 ctx.lineWidth = 5;
195 ctx.stroke();
196
197 //填充样式
198 ctx.fillStyle="#0f0";//必须写在fill()方法之前，之后的无效
199 ctx.fill();
200
201 <!DOCTYPE html>
202 <html lang="en">
203 <head>
204 <meta charset="UTF-8">
205 <title>描边与填充</title>
206 <style>
207 .mycanvas{background: #ccc;}
208 </style>
209 </head>
210 <body>
211 <canvas id="mycanvas" class="mycanvas" width="300px" height="300px">您的浏览器不支持canvas,请升级！</canvas>
212 <script>
213 var canvas = document.querySelector("#mycanvas");
214 var ctx = canvas.getContext("2d");//设置2d环境
215 ctx.moveTo(20,20);
216 ctx.lineTo(50,100);
217 ctx.lineTo(20,100);
218 ctx.closePath();
219 // 先描边再填充，所以填充会覆盖描边的颜色
220 // 如果是先填充再描边，描边会覆盖填充。后面覆盖前面的部分。
221 ctx.strokeStyle="#f0f";
222 ctx.lineWidth = 5;
223 ctx.stroke();
224 ctx.fillStyle="#0f0";
225 ctx.fill();
226
227 //画圆
228 // 先描边再填充，填充的红色会覆盖描边的紫色
229 // 相反，描边的紫色会覆盖填充的红色
230 ctx.beginPath();
231 ctx.arc(100,200,50,0,2*Math.PI,true);
232 ctx.strokeStyle="purple";
233 ctx.lineWidth=10;
234 ctx.stroke();
235 ctx.fillStyle="rgba(255,0,0,.2)";
236 ctx.fill();
237
238 //矩形
239 ctx.beginPath();
240 ctx.strokeStyle="rgba(0,255,255,.5)";
241 ctx.lineWidth=20;
242 ctx.strokeRect(150,80,100,50);
243 //因为ctx.strokeRect(x,y,w,h);是已经封装好的，所以使用fill()方法是无效的，即矩形不能填充，只能使用其他方式进行填充。
244 // ctx.fillStyle="green";
245 // ctx.fill();
246 </script>
247 </body>
248 </html>
249
250 =========
浙公网安备 33010602011771号