使用canvas绘制一个圆或者圆弧

待我称王封你为后i 2022-12-10 02:25 242阅读 0赞

[`arc(x, y, radius, startAngle, endAngle, anticlockwise)`][arc_x_ y_ radius_ startAngle_ endAngle_ anticlockwise]

1.  画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
2.  `arc()`函数中表示角的单位是弧度，不是角度。`startAngle, endAngle的单位是弧度；`角度与弧度的js表达式:  弧度=(Math.PI/180)\*角度。
3.  参数`anticlockwise`为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

代码如下：

<template>
      <div class="div">
        <canvas id="tutorial3" width="150" height="150"></canvas>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      mounted() {
        var canvas = document.getElementById("tutorial3");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d"); // 获得上下文对象（画笔）
          ctx.beginPath();
          ctx.arc(75, 75, 50, 0, (Math.PI/180)*30, true); // 绘制
            // arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:弧度=(Math.PI/180)*角度。
          ctx.stroke(); 
        }
      },
    };
    </script>
    <style lang='scss' scoped>
    </style>

效果：

![20200923142244667.png][]

说明：代码是想逆时针画一个从0度到30度的圆弧；

[arc_x_ y_ radius_ startAngle_ endAngle_ anticlockwise]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arc
[20200923142244667.png]: /images/20221123/827f3dec985a46fdba78c5a9c56fe926.png

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关使用canvas绘制一个三角形

绘制一个三角形的例子： <template> <div class> <canvas id="tutorial2" width="15

￡神魔★判官ぃ/ 2022年12月13日 14:26/ 0 赞/ 194 阅读

相关 canvas 绘制一个三角形

代码： <template> <div class="div"> <canvas id="tutorial3" width="350"

悠悠/ 2022年12月12日 02:13/ 0 赞/ 194 阅读

相关使用canvas绘制一个圆或者圆弧

[`arc(x, y, radius, startAngle, endAngle, anticlockwise)`][arc_x_ y_ radius_ startAngle_

待我称王封你为后i/ 2022年12月10日 02:25/ 0 赞/ 243 阅读

相关 Canvas学习：绘制圆和圆弧

圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制[线段][Link 1]和[矩形][Link 2]一样的简单

落日映苍穹つ/ 2022年09月30日 05:00/ 0 赞/ 668 阅读

相关 canvas之三：绘制弧和圆

在画完直线和三角形之后，接下来我们要画一段弧和一个圆，先看下效果图： ![20160516123944790][] 源代码： <!DOCTYPE html> <

亦凉/ 2022年07月24日 06:25/ 0 赞/ 202 阅读

相关 drawArc方法：绘制圆弧

【功能说明】该方法用于在画布上绘制圆弧，通过指定圆弧所在的椭圆对象、起始角度、终止角度来实现。该方法是绘制圆弧的主要方法。【基本语法】public void drawArc

浅浅的花香味﹌/ 2022年07月14日 07:20/ 0 赞/ 217 阅读

相关使用 canvas 画圆

src="https://mdn.mozillademos.org/zh-CN/docs/learn/JavaScript/Building\_blocks/Looping\_

缺乏、安全感/ 2022年06月03日 09:28/ 0 赞/ 252 阅读

相关 canvas基础—02绘制圆

1.绘制圆 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

阳光穿透心脏的1/2处/ 2022年03月20日 10:26/ 0 赞/ 272 阅读

相关 h5 Canvas圆弧与圆形的绘制

圆和圆弧是图形中基本图形之一.在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。 JavaS

向右看齐/ 2022年03月16日 12:46/ 0 赞/ 400 阅读

相关 HTML5高阶实例之canvas绘制圆弧

最新更新时间：2019年07月14日14:18:12 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：canvas 绘制圆弧

亦凉/ 2021年12月09日 17:39/ 0 赞/ 480 阅读