使用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 關注
- 985 瀏覽
添加回答
舉報
0/150
提交
取消