今日の課題：Canvasで線形グラデーションを描く
<!DOCTYPE html>
<html>
<head>
<title>HTML5の練習＠ヒッキープログラミングスレ</title>
<style type="text/css">
body { background-color: silver; }
canvas { background-color: white; }
</style>
</head>
<body>
<h4>線形グラデーションを描く</h4>
<canvas id="mycanvas" width="640" height="480"></canvas>
<script language="javascript" type="text/javascript">
function rad(d) {
return 2.0 * Math.PI * (d / 360.0);
}
function mydraw() {
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
var grad = ctx.createLinearGradient(0, 0, 0, 100);
grad.addColorStop( 0.0, 'rgb(255,0,0)');
grad.addColorStop( 0.5, 'rgb(0,255,0)');
grad.addColorStop( 1.0, 'rgb(0,0,255)');
ctx.fillStyle = grad;
ctx.rect(0, 0, 100, 100);
ctx.fill();
ctx.fillRect(110, 50, 100, 100);
grad = ctx.createLinearGradient(250, 0, 450, 0);
grad.addColorStop(0.0, 'yellow');
grad.addColorStop(0.5, 'magenta');
grad.addColorStop(1.0, 'cyan');
ctx.fillStyle = grad;
ctx.fillRect(250, 0, 200, 100);
grad = ctx.createLinearGradient(50, 200, 250, 400);
grad.addColorStop(0.1, 'yellow');
grad.addColorStop(0.6, 'green');
grad.addColorStop(0.9, 'blue');
ctx.beginPath();
ctx.fillStyle = grad;
ctx.moveTo(150, 300);
ctx.arc(150, 300, 100, rad(15), rad(360 - 15), false);
ctx.fill();
}
mydraw();
</script>
</body>
</html>
- createLinearGradient(x0,y0,x1,y1) 線形グラデーションを準備する
(x0,y0)から(x1,y1)にかけて線形グラデーションにする
- addColorStop(p,c) 線形グラデーションの色の指定する。
pには(x0,y0)から(x1,y1)までの線分の長さを１としたときの色の位置、cはStyleSheet(CSS)で指定する色を文字列で指定する
- rect(x,y,w,h) 長方形を描く、strokeRect()/fillRect()は直接長方形を描くが
rect()はlineTo()やarc()などと同じようにbeginPath()カレント座標の影響を受けるしstroke()やfill()メソッドを読んで線を確定する必要がある
closePath()を呼び出す前や新たにbeginPath()を呼ぶ前にstroke()やfill()を再度呼び出すと後で指定した色で全部描きなおされてしまう(strokeRect()/fillRect()などは影響を受けない)
(closePath()を呼んでも意味無くてbeginPath()を呼ばない限り影響を受ける)
最終更新：2016年05月11日 06:01
