キャンバスで遊び中 - 虹を表示

JS


http://www.fujidig.com/misc/js/canvas/rainbow.html

var canvas = document.body.appendChild(document.createElement('canvas'));
canvas.width = 200;
canvas.height = 200;

var ctx = canvas.getContext('2d');

var radgrad = ctx.createRadialGradient(200,200,150,200,200,200);
radgrad.addColorStop(0, 'rgba(255,0,255,0)');
radgrad.addColorStop(0.1, 'rgba(255,0,255,1)');
radgrad.addColorStop(0.2, 'rgba(0,0,255,1)');
radgrad.addColorStop(0.4, 'rgba(0,255,255,1)');
radgrad.addColorStop(0.6, 'rgba(0,255,0,1)');
radgrad.addColorStop(0.8, 'rgba(255,255,0,1)');
radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');
radgrad.addColorStop(1, 'rgba(255,0,0,0)');

ctx.fillStyle = radgrad;
ctx.fillRect(0,0,200,200);