对应HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>canvas</title> 6 <script type="text/javascript" src="js/canvas.js" ></script> 7 </head> 8 <body> 9 <canvas id="div_1"> 10 11 </canvas > 12 <script> 13 aa(); 14 </script> 15 </body> 16 </html>
对应JavaScript
1 function aa(){ 2 var c = document.getElementById("div_1"); 3 var cxt=c.getContext("2d"); 4 5 cxt.fillStyle="#FF0000"; 6 cxt.fillRect(10,10,50,30); //左上角10px处100*50的矩形 7 8 cxt.strokeStyle='#FF0000'; 9 cxt.moveTo(60,10); 10 cxt.lineTo(80,25); 11 cxt.lineTo(60,40); 12 cxt.stroke(); 13 14 cxt.fillStyle="#000000"; 15 cxt.beginPath(); 16 cxt.arc(80,25,2,0,Math.PI*2,true); 17 /*第一个和第二个参数,代表圆心坐标. 18 第三个参数是圆的半径.第四个参数代表圆周起始位置.0 19 就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）, 20 为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆, 21 Math.PI是半圆.第六个参数是一个布尔值,true是顺时针false是顺时针.*/ 22 cxt.closePath(); 23 cxt.fill(); 24 }
运行结果
