标签：不能 blog doc 影响 meta var pat mat 矩形
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 canvas{background: #F5F5F5} 8 </style> 9 </head> 10 <body> 11 <canvas id="canvas1" width="900" height="700"> 12 当前浏览器不支持canvas 13 </canvas> 14 <script type="text/javascript"> 15 var canvas=document.getElementById(‘canvas1‘);//定义变量获取画布DOM 16 var context=canvas.getContext(‘2d‘);//设置绘图环境为2d 17 context.lineWidth=4; 18 context.strokeStyle="#FF00FF"; 19 context.moveTo(200,100); 20 context.lineTo(200,200); 21 context.lineTo(250,200); 22 context.lineTo(250,150); 23 context.lineTo(150,150); 24 context.lineTo(150,200); 25 context.lineTo(200,200); 26 context.lineTo(200,250); 27 //context.closePath();//从当前点回到起始点来封闭路径 28 context.stroke(); 29 //绘制矩形 30 context.beginPath();//此句不能省，否则上面的图样式会受下面的设置影响 31 context.lineWidth=2; 32 context.strokeStyle="#0000FF"; 33 context.rect(260,100,50,20) //语句结尾分号;可省 34 context.stroke(); 35 36 context.beginPath(); 37 context.strokeRect(320,100,50,30); 38 39 context.beginPath(); 40 context.lineWidth=2; 41 context.fillStyle="#FF0000"; 42 context.rect(380,100,40,20); 43 context.fill(); 44 45 context.beginPath(); 46 context.lineWidth=2; 47 context.fillStyle="#00FF00"; 48 context.fillRect(430,100,50,50); 49 50 context.beginPath(); 51 context.lineWidth=3; 52 context.arc(500,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针 53 context.stroke(); 54 55 context.beginPath(); 56 context.lineWidth=3; 57 context.arc(600,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针 58 context.fill(); 59 context.stroke(); 60 61 context.beginPath(); 62 context.arc(600,100,50,0,(Math.PI)/2); 63 context.stroke(); 64 65 context.beginPath(); 66 context.arc(700,100,50,0,(Math.PI)/2); 67 context.closePath(); 68 context.fill(); 69 context.stroke(); 70 71 //绘制扇形，思路很好！ 72 context.beginPath(); 73 context.strokeStyle="#F5F5F5"; 74 context.moveTo(200,400); 75 context.arc(200,400,150,Math.PI*7/6,Math.PI*11/6); 76 context.fill(); 77 context.stroke(); 78 context.beginPath(); 79 context.fillStyle="#F5F5F5"; 80 context.strokeStyle="#F5F5F5"; 81 context.moveTo(200,400); 82 context.arc(200,400,50,Math.PI*7/6,Math.PI*11/6); 83 context.fill(); 84 context.stroke(); 85 context.beginPath(); 86 context.moveTo(200,400); 87 context.lineWidth=5; 88 context.arc(200,400,50,Math.PI*11/6,Math.PI*11/6); 89 context.stroke(); 90 91 context.beginPath(); 92 context.lineWidth=1; 93 context.strokeStyle="#000000"; 94 context.fillStyle="#000000"; 95 context.font="40px 隶书"; 96 context.strokeText("黄山",280,400); 97 context.fillText("天柱山",380,400); 98 context.strokeStyle="#FFFF00"; 99 context.fillStyle="#00FFFF"; 100 context.fillText("方特欢乐世界",500,400); 101 context.strokeText("方特欢乐世界",500,400); 102 </script> 103 </body> 104 </html>
标签：不能 blog doc 影响 meta var pat mat 矩形
原文地址：http://www.cnblogs.com/xiongjiawei/p/6748666.html
