使用路径arc - xiaoleilei

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用路径</title>
</head>
<body>
    <canvas id="ourCanvas" width="400" height="400" style="border:3px dashed #0094ff;" ></canvas>
<script>
    //arc(float x,float y,float radius,float startAngel,endAngel,booleancounterclockwise)counterclockwise逆时针
    //向Canvas的当前路径添加一段弧。绘制以x、y为圆心的，radius为半径，从startAngel角度开始，到endAngel角度结束的圆弧。startAngel和endAngel以弧度作为单位。
    var canvas = document.getElementById("ourCanvas");
    var ctx = canvas.getContext("2d");
    //开始定义路径
    ctx.beginPath();

    //添加一段圆弧
    ctx.arc(166, 166, 90, 0,Math.PI*0.6, true);

    //关闭路径
    ctx.closePath();

//设置填充颜色
ctx.strokeStyle = "#f00";

//设置填充宽度
ctx.lineWidth = 10;

//填充当前路径
ctx.stroke();

</script>
</body>
</html>

posted on 2013-07-03 22:04 xiaoleilei 阅读(275) 评论(0) 收藏举报

刷新页面返回顶部