HTML5通过Canvas绘制圆形_H5之家 - 中国HTML5教程资源分享第一站

HTML5通过Canvas绘制圆形

想要绘制其他图形，需要使用路径，使用路径包含4个步骤，开始创建路径、创建图形的路径、路径创建完成后，关闭路径和设定绘制样式，调用绘制方法，绘制路径。

核心内容：绘制路径.moveTo.lineTo.bezierCurveTo

HTML5绘制圆形，主要包含四个步骤，开始创建路径、创建图形的路径、路径创建完成后，关闭路径和设定绘制样式，调用绘制方法，绘制路径。

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function draw(id){ var canvas=document.getElementById(id); if(canvas==null){ return false; } var context=canvas.getContext("2d"); context.fillStyle="aqua"; context.fillRect(0,0,600,700);//绘制矩形 for(var i=0;i<=10;i++){ context.beginPath();//创建路径 context.arc(i*10,i*10,i*5,0,Math.PI*2,true); //i*25,i*25圆心的x、Y坐标，i*10半径，0起始角度，PI*2弧度，False = 顺时针，true = 逆时针。 context.closePath();//一定要关闭路径 context.fillStyle="rgba(255,0,0,0.25)"; context.fill(); } } </script> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="300px" height="200px"></canvas> </body> </html>

效果图：

html5画圆效果图

本文地址：