用canvas来绘制弧线和圆的方法

这篇文章主要介绍用canvas来绘制弧线和圆的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

满洲ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

html文件如下所示:


    
    Canvas绘制弧线和圆
    当用户浏览器不支持Canvas,请更换浏览器重试!

绘制弧线或圆需要使用arc方法,首先,让我们了解一下这个方法:
context.arc( x,y,r,sAngle,eAngle,counterclockwise);
该方法共有6个参数:

x :圆心x轴坐标

y:圆心y轴坐标

r:半径

sAngle:弧线起始位置

eAngle:弧线终止位置

counterclockwise:可选参数,默认为false,规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。
首先,让我们开始绘制一条弧线,代码如下:

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="blue"context.arc(300,300,200,0,2*Math.PI);
context.stroke();//画一个空心弧线
 context.fillStyle="red"
 context.fill();//收尾直接相连为一个封闭图形,以红色填充该图形

绘制了一个弧线之后,让我们尝试绘制多个弧线,以致为一个圆,直接上代码:

window.onload= function () {        var canvas=document.getElementById("canvas");        if(canvas.getContext("2d")){            var context=canvas.getContext("2d");
            context.lineWidth=5;
            context.strokeStyle="red";          
            for(var i=0;i<10;i++){//绘制十个弧线,收尾封闭,没有填充色
                context.beginPath();
                context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
                context.closePath();//使弧线封闭,形成一个闭合图形
                context.stroke();
            }            for(var i=0;i<10;i++){//绘制十个弧线,收尾不封闭,没有填充色
                context.beginPath();
                context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
                context.stroke();
            }            for(var i=0;i<10;i++){//绘制十个弧线,收尾封闭且填充为默认色
                context.beginPath();
                context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);//逆时针绘制
                context.fill();
            }
        }else {
            alert("不支持canvas,请更换浏览器!")
        }
    };

用canvas来绘制弧线和圆的方法

以上是用canvas来绘制弧线和圆的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前标题:用canvas来绘制弧线和圆的方法
网页路径:http://pwwzsj.com/article/gdceoe.html