canvas arc画圆遇到的问题

一顿操作猛如虎，啥也不是！

于 2015-08-28 15:57:27 发布

阅读量2.6k

点赞数

分类专栏： html5

html5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
    draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>