如何用html制作彩虹,使用transform和arc方法，怎么绘制彩虹效果。

图6-30 彩虹效果

function draw(id) {

var canvas = document.getElementById('canvas');

if (canvas == null)

return false;

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

/*定义颜色*/

var colors = ["#FF0000", "YELLOW", "#0D0", "#00F", "#C0C"];

/*定义线宽*/

context.lineWidth = 10;

context.transform(1, 0, 0, 1, 100, 0);

/*循环绘制椭圆*/

for (var i = 0; i < colors.length; i++) {

/*定义每次向下移动10个像素的变换矩阵*/

context.transform(1, 0, 0, 1, 0, 10);

/*设定颜色*/

context.strokeStyle = colors[i];

/*绘制圆弧*/

context.beginPath();

context.arc(30, 110, 100, 0, Math.PI, true);

context.stroke();

}

}

你的浏览器不支持Canvas