HTML5中canvas画图之画圆形-蒲公英云

HTML5中canvas画图之画圆形

桃扇骨 2022-08-23 05:51 309阅读 0赞

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5圆形</title>
    <script type="text/javascript">
        window.addEventListener("load",function(){
            //canvas的2d上下文
            var ctx=document.getElementById("canvas").getContext("2d");
            //圆1
            ctx.beginPath();
            ctx.arc(150,45,35,0,Math.PI*2,false);
            ctx.fillStyle="rgba(192,80,77,0.7)";//半透明的红色
            ctx.fill();
            ctx.strokeStyle="rgba(192,80,77,1)";//红色
            ctx.stroke();
            //圆2
            ctx.beginPath();
            ctx.arc(125,95,35,0,Math.PI*2,false);
            ctx.fillStyle="rgba(155,187,89,0.7)";//半透明绿色
            ctx.fill();
            ctx.strokeStyle="rgba(155,187,89,1)";//绿色
            ctx.stroke();
            //圆3
            ctx.beginPath();
            ctx.arc(175,95,35,Math.PI*2,false);
            ctx.fillStyle="rgba(128,100,162,0.7)";//半透明的紫色
            ctx.fill();
            ctx.strokeStyle="rgba(128,100,132,1)";//紫色
            ctx.stroke();
        });
    </script>
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>