本文介绍如何使用HTML5的canvas元素及JavaScript脚本来绘制圆形。通过beginPath(), arc(), closePath(), fill() 和 stroke()等方法的配合使用，实现动态绘制不同大小的圆形，并设置其填充色和边框。
3、利用canvas元素及JS脚本绘制圆形
（1）表明开始绘制新路径：利用上下文对象的beginPath()方法
（2）绘制圆形路径：利用上下文对象的arc()方法，
语法是：arc(x,y,radius,startAngle,endAngle,anticlockwise),其中（x,y）是圆的圆心，radius是圆的半径，startAngle是起始角度，endAngle是结束角度，anticlockwise表示是否按照顺时针方向绘制，如果要表示360度，可以使用Math.PI*2
（3）创建完成闭合路径：利用closePath()方法
（4）设置绘制的样式：调用fillStyle属性及fill()方法进行填充，或者调用strokeStyle及stroke()方法绘制边框，demo及呈现效果如下：
Index.html文件中的代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>canvas元素绘制矩形</title>
<scripttype="text/javascript" src='canvas.js'></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<bodyonload="draw('canvas')">
<canvasid='canvas' width='400' height="300"></canvas>
</body>
</html>
canvas.js文件中的代码如下：
functiondraw(id){
varcanvas=document.getElementById(id);
var context=canvas.getContext('2d');
context.fillStyle='#f1f2f3';//填充颜色为黑色
context.fillRect(0,0,400,400);//绘制填充矩形
for(var i=1;i<10;i++){
context.beginPath();//每一次循环都重新开始绘制
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();//每一次循环都要闭合路径
context.fillStyle='rgba(255,0,0,0.25)';
context.fill();//设置填充样式
context.strokeStyle='red';
context.stroke();//设置边框样式
}
}
效果图为：
注意：绘制的路径如果不设置样式，在画布上是看不到的，所以最后一步必须调用fill或stroke方法进行填充或描边才能在画布上显示出来
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
