使用路径arc

时间 2019-12-09

标签使用路径 arc 繁體版

原文原文链接

<!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();html

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

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

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

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

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

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