AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

canvas系列教程02——圆、弧线、圆角矩形、曲线（气泡、心形、N叶草）、扇形

2024-07-03 54
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： canvas系列教程02——圆、弧线、圆角矩形、曲线（气泡、心形、N叶草）、扇形

此系列教程层层递进，建议按顺序阅读

  • canvas系列教程01——直线、三角形、多边形、矩形、调色板
    https://blog.csdn.net/weixin_41192489/article/details/124333306

圆 arc()

cxt.beginPath();
cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise);
cxt.closePath();

  • (x,y)为圆心坐标
  • 开始和结束角度的单位为弧度，推荐写法如下：
120*Math.PI/180   //120°
150*Math.PI/180   //150°


  • anticlockwise表示绘制方向，布尔值
    —— true 逆时针
    —— false 顺时针（默认值）
             //半圆
             cxt.beginPath();
             cxt.arc(80, 80, 50, 0, 180*Math.PI/180, true);
             cxt.closePath();
             //描边
             cxt.strokeStyle = "HotPink";
             cxt.stroke();
             //整圆
             cxt.beginPath();
             cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true);
             cxt.closePath();
             //描边
             cxt.strokeStyle = "HotPink";
             cxt.stroke();


             cxt.beginPath();
             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
             cxt.closePath();
             cxt.strokeStyle = "HotPink";
             cxt.stroke();


cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false);

             //半圆
             cxt.beginPath();
             cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
             cxt.closePath();
             //填充
             cxt.fillStyle = "HotPink";
             cxt.fill();
             //整圆
             cxt.beginPath();
             cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180, true);
             cxt.closePath();
             //填充
             cxt.fillStyle = "#9966FF";
             cxt.fill();

弧线

方法一 arc() 绘制

//状态描述
cxt.beginPath();
cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise);
//描边
cxt.strokeStyle = "颜色值";
cxt.stroke();

和圆一样，使用arc()，但不需要关闭路径！ （即没有 cxt.closePath()）

             cxt.beginPath();
             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
             cxt.stroke();

stroke()和fill()这两个方法只能绘制当前路径，不能同时绘制几个路径。

             //绘制一条直线
             cxt.moveTo(20,20);
             cxt.lineTo(70,20);
             cxt.stroke();

             //绘制圆弧+直线
             cxt.beginPath();
             cxt.arc(70,70,50,0,-90*Math.PI/180,true);
             cxt.moveTo(120,70);
             cxt.lineTo(120,120);
             cxt.stroke(); 


             //绘制一条直线
             cxt.moveTo(20,20);
             cxt.lineTo(70,20);
             // cxt.stroke();  注释掉之后，此直线不会绘制

             //绘制圆弧+直线
             cxt.beginPath();
             cxt.arc(70,70,50,0,-90*Math.PI/180,true);
             cxt.moveTo(120,70);
             cxt.lineTo(120,120);
             cxt.stroke();

方法二 arcTo() 绘制

cxt.arcTo(cx,cy,x2,y2,radius);

一般由moveTo()或lineTo()提供开始点

  • cx,cy 为控制点坐标
  • x2,y2 为结束点坐标
  • radius 是圆弧半径
  • arcTo()方法绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果开始点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。也就是说，开始点坐标并不一定是弧线起点坐标。
             cxt.moveTo(20,20);
             cxt.lineTo(70,20);
             cxt.arcTo(120,20,120,70,50);
             cxt.lineTo(120,120);
             cxt.stroke();


             cxt.moveTo(20,20);
             // cxt.lineTo(70,20);  注释掉后，仍会画直线！
             cxt.arcTo(120,20,120,70,50);
             cxt.lineTo(120,120);
             cxt.stroke();

圆角矩形

方法一 直线和弧线拼接

             cxt.moveTo(40,20);
             cxt.lineTo(160,20);
             cxt.arcTo(180,20,180,40,20);
             cxt.moveTo(180,40);
             cxt.lineTo(180,110);
             cxt.arcTo(180,130,160,130,20);
             cxt.moveTo(160,130);
             cxt.lineTo(40,130);
             cxt.arcTo(20,130,20,110,20);
             cxt.moveTo(20,110);
             cxt.lineTo(20,40);
             cxt.arcTo(20,20,40,20,20);
             cxt.stroke();

方法二 封装一个专门绘制圆角矩形的函数

        /*
         * createRoundedRect()用于绘制圆角矩形
         * width、height：分别表示长和宽
         * r：表示圆角半径
         * offsetX、offsetY：分别表示左上角顶点坐标
         */
        function createRoundedRect(cxt, width, height, r, offsetX, offsetY) {
             cxt.beginPath();
             cxt.moveTo(offsetX + r, offsetY);
             cxt.lineTo(offsetX + width - r, offsetY);
             cxt.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r);
             cxt.lineTo(offsetX + width, offsetY + height - r);
             cxt.arcTo(offsetX + width, offsetY + height, offsetX + width - r, offsetY + height, r);
             cxt.lineTo(offsetX + r, offsetY + height);
             cxt.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r);
             cxt.lineTo(offsetX, offsetY + r);
             cxt.arcTo(offsetX, offsetY, offsetX + r, offsetY, r);
             cxt.closePath();
        }

             createRoundedRect(cxt, 100, 100, 20, 20, 20);
             cxt.fillStyle = "HotPink";
             cxt.fill();

曲线

从理论上来说，任何复杂的图形都可以用贝塞尔曲线绘制出来

二次贝塞尔曲线

二次贝塞尔曲线有一个控制点，只能向一个方向弯曲

cxt.quadraticCurveTo(cx , cy , x2,y2);

一般由moveTo()或lineTo()提供开始点

  • cx,cy 为控制点坐标
  • x2,y2 为结束点坐标

    绘制原理可以参考下图：
             cxt.moveTo(30, 120);
             cxt.quadraticCurveTo(100, 20, 160, 120);
             cxt.stroke();

实战范例：气泡

             cxt.moveTo(75, 25);
             cxt.quadraticCurveTo(25, 25, 25, 62);
             cxt.quadraticCurveTo(25, 100, 50, 100);
             cxt.quadraticCurveTo(50, 120, 30, 125);
             cxt.quadraticCurveTo(60, 120, 65, 100);
             cxt.quadraticCurveTo(125, 100, 125, 62);
             cxt.quadraticCurveTo(125, 25, 75, 25);
             cxt.stroke();

三次贝塞尔曲线

三次贝塞尔曲线有两个控制点，可以绘制出波浪线

cxt.bezierCurveTo(cx1 , cy1 , cx2 , cy2 , x , y);

一般由moveTo()或lineTo()提供开始点

  • cx1,cy1 为控制点1的坐标
  • cx2,cy2 为控制点2的坐标
  • x,y 为结束点坐标

    绘制原理可参考下图：
             //绘制三次贝塞尔曲线
             cxt.moveTo(20, 80);
             var cx1 = 20;
             var cy1 = 20;
             var cx2 = 120;
             var cy2 = 120;
             var endX = 120;
             var endY = 60;
             cxt.bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY);
             cxt.stroke();

实战范例：心形

             cxt.moveTo(75, 40);
             cxt.bezierCurveTo(75, 37, 70, 25, 50, 25);
             cxt.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
             cxt.bezierCurveTo(20, 80, 40, 102, 75, 120);
             cxt.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
             cxt.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
             cxt.bezierCurveTo(85, 25, 75, 37, 75, 40);
             cxt.stroke();

实战范例：N叶草

        /*
         * createLeaf()用于绘制N叶草
         * n：n片
         * dx、dy：叶子中心位置的坐标
         * size：控制叶子的大小
         * length：控制叶子长度
         */
        function createLeaf(cxt, n, dx, dy, size, length) {
             cxt.beginPath();
             cxt.moveTo(dx, dy + size);
             var degree = 2 * Math.PI / n;
             for (var i = 1; i < n + 1; i++) {
                  //计算控制点的坐标
                  var cx1 = Math.sin((i - 1) * degree) * length + dx;
                  var cy1 = Math.cos((i - 1) * degree) * length + dy;
                  var cx2 = Math.sin(i * degree) * length + dx;
                  var cy2 = Math.cos(i * degree) * length + dy;
                  //计算结束点的坐标
                  var x = Math.sin(i * degree) * size + dx;
                  var y = Math.cos(i * degree) * size + dy;
                  cxt.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
             }
             cxt.closePath();
        }

             createLeaf(cxt, 4, cnv.width/2, cnv.height/2, 20, 80);
             //定义填充颜色为浅绿色
             cxt.fillStyle = "#00FF99";
             cxt.fill();

扇形

封装绘制扇形的函数 createSector

        function createSector(cxt, x, y, r, angle1, angle2) {
             cxt.beginPath();
             cxt.moveTo(x, y);
             cxt.arc(x, y, r, angle1 * Math.PI / 180, angle2 * Math.PI / 180, false);
             cxt.closePath();
        }

             createSector(cxt, cnv.width / 2, cnv.height / 2, 50, 30, 120);
             cxt.fillStyle = "HotPink";
             cxt.fill();
文章标签：
前端开发
朝阳39
目录
相关文章
好奇的菜鸟
|
6月前
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 2
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 2
好奇的菜鸟
35 0
朝阳39
|
5月前
|
前端开发 JavaScript
canvas系列教程01——直线、三角形、多边形、矩形、调色板
canvas系列教程01——直线、三角形、多边形、矩形、调色板
朝阳39
133 0
好奇的菜鸟
|
6月前
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 1
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景)
好奇的菜鸟
33 0
米果粒
|
7月前
|
Python
绘制圆
【5月更文挑战第9天】绘制圆。
米果粒
46 2
前端的路人丁
|
移动开发 HTML5
使用三次贝塞尔曲线绘制弧形菜单
使用三次贝塞尔曲线绘制弧形菜单
前端的路人丁
168 0
代码迷途
|
C# 图形学
C#之深入理解GDI+绘制圆弧及圆角矩形等比缩放的绘制
GDI+中对于圆弧的绘制，是以给定的长方形（Rectangle`结构）为边界绘制的椭圆的一部分形成的圆弧。绘制的圆弧的中心为长方形内切椭圆的圆心（如果是正方形，则正方形的...
代码迷途
637 0
C#之深入理解GDI+绘制圆弧及圆角矩形等比缩放的绘制
_Eureka_
|
前端开发 JavaScript 数据可视化
用Canvas实现简单画图（线、三角形、矩形、圆）
👋因为在B站看到一个小demo是基于canvas写的，非常喜欢，然后上掘金大数据又给我推了 《Canvas 从入门到劝朋友放弃（图解版）》，就像上手一下canvas，本来不想写笔记的，因为《Canvas 从入门到劝朋友放弃（图解版）》自己看了一下挺全的，但本着输入要有输出，所以就有了这篇文章
_Eureka_
251 0
码农技术君
|
C#
C#编程-133：绘制椭圆、弧、扇形
C#编程-133：绘制椭圆、弧、扇形
码农技术君
206 0
C#编程-133：绘制椭圆、弧、扇形
一叶飘舟
|
前端开发 Android开发
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
一叶飘舟
3492 0
w53alm3uernjs
122.绘制圆弧
122.绘制圆弧
w53alm3uernjs
81 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    46
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    110
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    38
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    42
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    47
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    32
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    107
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    262
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    158
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    36

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks售前咨询