HTML5 Canvas arc方法绘制圆弧

2013-10-2 11:15| 发布者: admin| 查看: 3434| 评论: 0

摘要: 说明这个示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。像我这里画90，18 ...

说明

这个示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。像我这里画 90，180 和 270 度的弧形看起来不是很麻烦，但是如果图形更复杂一些,则实现起来会越来越困难。

代码

<html>

<head>

function draw() {

var canvas = document.getElementById("cv");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

for (i=0;i<4;i++){

for(j=0;j<3;j++){

//chinese_xu 原始代码

ctx.beginPath();

var x = 25+j*50; // x coordinate

var y = 25+i*50; // y coordinate

var radius = 20; // Arc radius

var startAngle = 0; // Starting point on circle

var endAngle = Math.PI+(Math.PI*j)/2 ;

var anticlockwise = (i%2==0 ? false : true);

ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

if (i>1){

ctx.fill();

} else {

ctx.stroke();

}

} //chinese_xu 原始代码并没有按照1/4圆递增来画。

//修改后输出4行4列，要把画布扩大到200*200观看

for (i=0;i<4;i++){

for(j=0;j<4;j++){

ctx.beginPath();

var x = 25+j*50; // x coordinate

var y = 25+i*50; // y coordinate

var radius = 20; // Arc radius

var startAngle = 0; // Starting point on circle

var endAngle = Math.PI*(2-j/2);

var anticlockwise = (i%2==0 ? false : true);

ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

if (i>1){

ctx.fill();

} else {

ctx.stroke();

}

</script>

<title>测试绘制路径3复杂曲线title>

</head>

</canvas>

</body>

html>

效果：

鲜花

握手

雷人

路过

鸡蛋

收藏分享邀请

上一篇：HTML5 canvas绘制路径下一篇：HTML5 Canvas 绘制贝塞尔曲线 Bezier and quadratic curves

设为首页

收藏本站

html5作品展

官方QQ群

HTML5 Canvas arc方法绘制圆弧

相关阅读

相关分类