热门关键字:
jquery > jquery教程 > jquery教程 > HTML5 Canvas绘制圆与扇形

HTML5 Canvas绘制圆与扇形

279
作者:管理员
发布时间:2021/2/23 15:34:24
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3985
canvas绘制圆形的过程也是画线围边的过程。与传统的Canvas不同,目前 Canvas没有fillarc()方法,因此只能采用下面这样的方式实现圆的绘制:
ctx.fillStyle = "blue"; //填充色为蓝色
ctx.strokeStyle = "red"; //描边为红色
ctx.lineWidth = 2;
ctx.arc(200, 200, 150, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();


扇形其实是圆的一部分。在这里,我们要注意绘制时顺时针与逆时针的不同。首先看一下当逆时针参数为true时的情况,示例代码如下:
ctx.fillStyle = "blue"; //填充色为蓝色
ctx.strokeStyle = "red"; //描边为红色
ctx.lineWidth = 2;
ctx.arc(200, 200, 150, 0, Math.PI*(1/2), true);
ctx.fill();
ctx.stroke();


再来看一下当逆时针参数为false时的情况,示例代码如下:
ctx.fillStyle = "blue"; //填充色为蓝色
ctx.strokeStyle = "red"; //描边为红色
ctx.lineWidth = 2;
ctx.arc(200, 200, 150, 0, Math.PI*(1/2), false);
ctx.fill();
ctx.stroke();




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:HTML
友荐云推荐