3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

アニメーションプログラミング入門~その2~

CANVASで10000個の四角形を描いてみる

CANVASの使い方を勉強しながら「Width=865 Height=485」のサイズの中に10000個の四角形を描いてみました。
四角形の色もランダムに変えて、カラフルな四角形になったので、「色彩豊かなCANVAS」になりました。

→10000個の「〇〇〇」を描いてみた【アニメーションプログラミング~その2~】

わからないことだらけで、調べながら作っていったのですが、内容の理解がまだまだ曖昧なので、復習していきたいと思います。

今回作ったコードは、

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="robots" content="noindex,nofollow">
        <title>WEB SCREEN APP</title>
        <style>
            #screen {
                border: solid 1px #000000;
                background-color: #000000;
            }
        </style>
    </head>
    <body>
        <canvas id="screen" width="860" height="485"></canvas>
        <script>
            //canvas要素のDOM(Document Object Model)を取得
            var canvas = document.getElementById('screen');
            var context;
            var count = 10000;
            var x = 0;
            var y = 0;
            var r = 0;
            var g = 0;
            var b = 0;
            //コンテキストの取得可否チェック
            if(canvas.getContext){
                context = canvas.getContext('2d');
                for(var i = 0; i < count; i++){
                    context.beginPath();
                    var rectangle = new Path2D();
                    x = Math.floor(Math.random() * 850);
                    y = Math.floor(Math.random() * 475);
                    r = Math.floor(Math.random() * 256);
                    g = Math.floor(Math.random() * 256);
                    b = Math.floor(Math.random() * 256);
                    rectangle.rect(x, y, 10, 10);
                    context.fillStyle = "rgb(" + r +  ","+ g + "," + b + ")";
                    context.stroke(rectangle);
                    context.fill(rectangle);
                }
            }
        </script>
        <div id="link"></div>
    </body>
</html>

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?