码迷,mamicode.com
首页 > Web开发 > 详细

html canvas 圆弧

时间:2015-09-20 10:22:07      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

contxt.arc(x, y , r, 0 , 弧 1.5*Math.PI PI要注意大小写 , 顺时针=false 逆时针 true)

例如  context.arc(300, 300, 200, 0.5*Math.PI, 1*Math.PI, false);

 

 

<!DOCTYPE html>
<html>
    <canvas id="diag" height="200" width="200" style="border:1px solid">update your</canvas>
    <canvas id="diag2" height="200" width="200" style="border:1px solid">update your</canvas>
</html>
<script>

var canvas = document.getElementById(‘diag‘);     //huo
var context = canvas.getContext(‘2d‘);   //获取canvas上下环境
canvas.width = ‘800‘;
canvas.height = ‘800‘;
context.lineWidth=5;
context.strokeStyle= "#00f5f8";  //线的填充颜色
// context.arc(300, 300, 200, 0.5*Math.PI, 1*Math.PI, false);
context.fillStyle = "#aaa"  封闭图片内部填充颜色
for(var i=0; i<10; i++) {
    context.beginPath();
    context.arc(50*i, 330, 20, 0, 0.2*Math.PI*i, false);
    context.fill();
    context.stroke();

}
</script>

 

技术分享

html canvas 圆弧

标签:

原文地址:http://www.cnblogs.com/agang-php/p/4822874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!