HTML5でキャンバスに円を描画する例の紹介-H5 チュートリアル-php.cn

HTML5でキャンバスに円を描画する例の紹介

黄舟

リリース： 2017-07-22 09:56:49

オリジナル

2497 人が閲覧しました

キャンバスで円弧を使用して円形のパターンを描きます。関数のプロトタイプは context.arc(x, y, radius, start angle, end angle, 反時計回りに回転するかどうか); なので、開始角度と終了角度を変更することで円弧を描くことができます。

コードは次のとおりです:

<!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>