CANVASで１００００個の四角形を描いてみる
CANVASの使い方を勉強しながら「Width=865 Height=485」のサイズの中に１００００個の四角形を描いてみました。
四角形の色もランダムに変えて、カラフルな四角形になったので、「色彩豊かなCANVAS」になりました。
→１００００個の「〇〇〇」を描いてみた【アニメーションプログラミング～その２～】
わからないことだらけで、調べながら作っていったのですが、内容の理解がまだまだ曖昧なので、復習していきたいと思います。
今回作ったコードは、
<!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>