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 =========