arc路徑例子-磊哥

時間 2020-06-29

標籤 arc 路徑例子简体版

原文原文鏈接

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用路徑</title>
</head>
<body>
    <canvas id="ourCanvas" width="500" height="500" style="border:3px dashed #0094ff;"></canvas>
<script>
    var canvas = document.getElementById("ourCanvas");
    var ctx = canvas.getContext("2d");html

    ctx.strokeStyle = "#163B62";
    ctx.beginPath();
    ctx.arc(70, 70, 40, Math.PI*0.3, Math.PI * 0.8, false);
    ctx.stroke();canvas

    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(160, 70, 40, Math.PI * 0.55, Math.PI * 0.7, false);
    ctx.stroke();spa

    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(160, 70, 40, -Math.PI * 0.1, Math.PI * 0.1, false);
    ctx.stroke();

    ctx.strokeStyle = "#BF0628";
    ctx.beginPath();
    ctx.arc(250, 70, 40, Math.PI * 0.55, Math.PI * 0.7, false);
    ctx.stroke();
xml

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

相關標籤/搜索