220
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE HTML>
<html>
<head>
<script language="javascript">
function drawTop(ctx, fillStyle){
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.arc(0, 0, 30, 0,Math.PI,true);
ctx.closePath();
ctx.fill();
}
function draw(){
var ctx = document.getElementById('myCanvas').getContext("2d");
// 注意:所有的移动都是基于这一上下文。
ctx.translate(80,80);
for (var i=1;i<10;i++){
<!--ctx.save();-->
ctx.translate(60*i, 0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
<!--ctx.restore();-->
}
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>