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="1200"> 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 103 //线性渐变 104 g=context.createLinearGradient(100,450,300,300); 105 g.addColorStop(0,"#000000"); 106 g.addColorStop(0.2,"#ffffff"); 107 g.addColorStop(0.4,"#FF0000"); 108 g.addColorStop(0.6,"#00ff00"); 109 g.addColorStop(1,"#0000ff"); 110 context.fillStyle=g; 111 context.fillRect(100,450,300,300) 112 113 //放射性渐变 114 r=context.createRadialGradient(650,550,0,650,550,100); 115 r.addColorStop(0,"#000000"); 116 r.addColorStop(0.2,"#ffffff"); 117 r.addColorStop(0.4,"#FF0000"); 118 r.addColorStop(0.6,"#00ff00"); 119 r.addColorStop(1,"#0000ff"); 120 context.fillStyle=r; 121 context.arc(650,550,100,0,Math.PI*2); 122 context.fill(); 123 124 //太极图 125 g1=context.createLinearGradient(40,920,320,920); 126 g1.addColorStop(0,"#000000"); 127 g1.addColorStop(1,"#ffffff"); 128 129 g2=context.createLinearGradient(40,920,320,920); 130 g2.addColorStop(0,"#ffffff"); 131 g2.addColorStop(1,"#000000"); 132 133 g3=context.createRadialGradient(120,1000,0,120,1000,10); 134 g3.addColorStop(0,"#ffffff"); 135 g3.addColorStop(1,"#000000"); 136 137 g4=context.createRadialGradient(280,1000,0,280,1000,10); 138 g4.addColorStop(0,"#000000"); 139 g4.addColorStop(1,"#ffffff"); 140 141 context.beginPath(); 142 context.arc(200,1000,160,0,Math.PI); 143 context.arc(120,1000,80,0,Math.PI,true); 144 context.arc(280,1000,80,Math.PI,0,true);//没看懂为什么会反着颜色？ 145 context.fillStyle=g1; 146 context.fill();//上面的疑问懂了：fill功能是把上面3个弧围成的区域填充！ 147 148 context.beginPath(); 149 context.arc(200,1000,160,0,Math.PI,true); 150 context.arc(280,1000,80,0,Math.PI); 151 context.arc(120,1000,80,Math.PI,0); 152 context.fillStyle=g2; 153 context.fill(); 154 155 context.beginPath(); 156 context.fillStyle=g3; 157 context.arc(120,1000,10,0,Math.PI*2); 158 context.fill(); 159 160 context.beginPath(); 161 context.fillStyle=g4; 162 context.arc(280,1000,10,0,Math.PI*2); 163 context.fill(); 164 165 //设置文字阴影 166 context.shadowOffsetX=10; 167 context.shadowOffsetY=10; 168 context.shadowBlur=5; 169 context.shadowColor="red"; 170 context.fillStyle="blue"; 171 context.font="70px 隶书"; 172 context.fillText("舌尖上的中国",400,700); 173 174 //绘制饼图 175 context.beginPath(); 176 context.shadowOffsetX=0; 177 context.fillStyle="black"; 178 context.shadowColor="gray"; 179 context.fillText("绘制饼图",400,800); 180 context.fillStyle="red"; 181 context.moveTo(700,1000); 182 context.arc(700,1000,150,0,Math.PI/3); 183 context.fill(); 184 context.closePath();//还可设closePath(); 185 context.beginPath(); 186 context.fillStyle="blue"; 187 context.moveTo(700,1000); 188 context.arc(700,1000,150,Math.PI/3,Math.PI); 189 context.fill(); 190 context.closePath(); 191 context.beginPath(); 192 context.fillStyle="green"; 193 context.moveTo(700,1000); 194 context.arc(700,1000,150,Math.PI,Math.PI*5/3); 195 context.fill(); 196 context.closePath(); 197 context.beginPath(); 198 context.fillStyle="yellow"; 199 context.moveTo(700,1000); 200 context.arc(700,1000,150,Math.PI*5/3,Math.PI*2); 201 context.fill(); 202 context.closePath(); 203 context.fillStyle="black"; 204 context.font="20px 隶书"; 205 context.fillText("15%",750,1050); 206 context.fillText("35%",650,1050); 207 context.fillText("35%",650,950); 208 context.fillText("15%",750,950); 209 </script> 210 </body> 211 </html>