使用transform和arc方法，繪制如圖所示的彩虹效果。
1 回答
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
圖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);
/*循環(huán)繪制橢圓*/
for (var i = 0; i < colors.length; i++) {
/*定義每次向下移動(dòng)10個(gè)像素的變換矩陣*/
context.transform(1, 0, 0, 1, 0, 10);
/*設(shè)定顏色*/
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 關(guān)注
- 991 瀏覽
添加回答
舉報(bào)
0/150
提交
取消