ホームページ > 記事 > ウェブフロントエンド > JavaScriptで斜めのグラデーション円を描く

JavaScriptで斜めのグラデーション円を描く

藏色散人オリジナル: 2021-08-06 15:19:072065ブラウズ

前回の記事「jsを使ってメガネ笑顔を楽しく実装する」では、jsを使ってメガネ笑顔を描く方法を紹介しました。興味がありましたら友達に見てもらってください（笑）それでは、この記事では引き続き面白い描画方法を紹介していきます。

今日の記事のテーマは「次の図形[斜線、白丸から黒丸]を描くJavaScriptプログラムを書いてください。」

## ＃最初にタイトルを読んだときは、何を達成したいのかわからないかもしれませんが、この図は非常に明確で理解できるはずです。 js を使用してこのレンダリングをローカルで実現する方法を試すことができます。

次は私の実装方法です:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="1500" height="800">
    <p>更新您的浏览器!</p>
</canvas>
<script>
    function draw()
    {
        var ctx = document.getElementById("myCanvas").getContext("2d");
        var counter = 0;
        for (var i=0;i<6;i++)
        {
            for (var j=0;j<6;j++)
            {
                //从白到黑
 ctx.fillStyle = "rgb(" + Math.floor(255-42.5*i) + "," + Math.floor(255-42.5*i) +
 "," + Math.floor(255-42.5*j) + ")";
                ctx.beginPath();
                if (i === counter && j === counter)
                {
                    //创建圈
 ctx.arc(25+j*50,30+i*50,20,0,Math.PI*2,true);
                    ctx.fill();
                    //在圆圈周围创建一个边框，这样白色的会可见
 ctx.stroke();
                }
            }
            counter++;
        }
    }
    draw();
</script>
</body>
</html>

わかりました、このコードを直接実行しましょう。効果は次のとおりです:

JavaScriptで斜めのグラデーション円を描く