使用transform和arc方法，绘制如图所示的彩虹效果。
1 回答
德玛西亚99
TA贡献1770条经验 获得超3个赞
图6-30 彩虹效果
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
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();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width=260" height="180">
你的浏览器不支持Canvas
</canvas>
- 1 回答
- 0 关注
- 827 浏览
添加回答
举报
0/150
提交
取消