今日の課題：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.createRadialGradient(100, 100, 50, 100, 100, 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, 200, 200);
ctx.fill();
ctx.beginPath();
grad = ctx.createRadialGradient(300, 300, 20, 350, 300, 100);
grad.addColorStop( 0.0, 'yellow');
grad.addColorStop( 0.5, 'magenta');
grad.addColorStop( 1.0, 'cyan');
ctx.fillStyle = grad;
ctx.fillRect(250, 200, 200, 200);
}
mydraw();
</script>
</body>
</html>
- createRadialGradient(x0,y0,r0,x1,y1,r1) (x0,y0)の半径r0の円の位置から(x1,y1)の半径r1の円の位置までを円形グラデーションにする
- (x0,y0,r0)の円と(x1,y1,r1)の円でどちらかが一方の円を内包するように設定しないとカオスな感じになる
最終更新：2016年05月11日 06:09
