context.arcTo()

　　arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

JavaScript 语法： context.arcTo(x1,y1,x2,y2,r);

参数描述

参数 描述
x1 弧的起点的 x 坐标。
y1 弧的起点的 y 坐标。
x2 弧的终点的 x 坐标。
y2 弧的终点的 y 坐标。
r 弧的半径。

使用如下：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);           // 创建开始点

ctx.lineTo(100,20);          // 创建水平线

ctx.arcTo(150,20,150,70,50); // 创建弧

ctx.lineTo(150,120);         // 创建垂直线

ctx.stroke();                // 绘制

上述代码绘制效果如下：

起点A，先画一条线AB，使用arcTo声明另外一条线CD，那么BC和CD组成一个夹角，arcTo绘制半径为50的圆弧，然后连接到E点

如果把创建弧的C点坐标改一下（150,0）：ctx.arcTo(150,0,150,70,50);

如下图看到因为半径大，所以圆弧会撑开，圆弧的起点撑到了BC的线段的反向延长线上

　　我们把半径改小到20，ctx.arcTo(150,0,150,70,20)

如下图：

绘制圆角多边形　　

　　理解了arcTo画弧的逻辑，我们回到绘制圆角多边形的话题

需求简述如下图，三角形ABC，我们绘制成圆角，顶点处是个圆弧。

知道多半形顶点坐标，利用canvas的api方法 arcTo() 就可以实现了。

一个绘制圆角多边形简单的实现：

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5   <meta charset="UTF-8" />

 6   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 7   <title>Document</title>

 8   <style>

 9     #canvas {

10       width: 400px;

11       height: 400px;

12     }

13   </style>

14 </head>

15

16 <body>

17   <canvas id="canvas" width="800" height="800"></canvas>

18 </body>

19 <script>

20   function draw() {

21     const p = [

22       [15, 20],

23       [20, 200],

24       [200, 300],

25       [300, 100],

26       [200, 20],

27     ];

28     const p1 = [

29       [300,50],

30       [400,50],

31       [350,150]

32     ]

33     const canvas = document.getElementById("canvas");

34     const ctx = canvas.getContext("2d");

35     drawRect(p, 30, ctx);

36     drawRect(p1, 10, ctx);

37   }

38

39   function drawRect(p, radius, ctx) {

40     ctx.beginPath();

41     const startPoint = [

42       (p[0][0] + p[p.length - 1][0]) / 2,

43       (p[0][1] + p[p.length - 1][1]) / 2,

44     ];

45     ctx.moveTo(...startPoint);

46     for (let i = 0; i < p.length; i++) {

47       if (i === p.length - 1) {

48         ctx.arcTo(...p[p.length - 1], ...p[0], radius);

49       } else {

50         ctx.arcTo(...p[i], ...p[i + 1], radius);

51       }

52     }

53     ctx.closePath();

54     ctx.stroke();

55   }

56   window.onload = function() {

57     draw();

58   };

59 </script>

60

61 </html>

实现效果如下图：

canvas绘制--圆角多边形的更多相关文章

  1. [原译]WPF绘制圆角多边形

    原文:[原译]WPF绘制圆角多边形 介绍 最近,我发现我需要个圆角多边形.而且是需要在运行时从用户界面来绘制.WPF有多边形.但是不支持圆角.我搜索了一下.也没找到可行的现成例子.于是就自己做吧.本文 ...

  2. canvas绘制圆角头像

    如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...

  3. canvas 绘制圆角矩形

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  4. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...

  5. canvas绘制多边形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  10. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

随机推荐

  1. Go 接收命令行参数

    在 Go 语言中,可以使用标准库中的 os 包和 flag 包来接收和处理命令行参数. 使用 os 包 os.Args 是一个字符串切片,其中第一个元素是程序的名称,后续元素是传递给程序的命令行参数. ...

  2. Istio实现sidecar自动注入

    Istio实现sidecar自动注入 Sidecar模式 在Sidecar部署方式中,你会为每个应用的容器部署一个伴生容器.对于Service Mesh,Sidecar接管进出应用程序容器的所有网络流 ...

  3. C++: 16个基础的C++代码性能优化实例

    前言 近期推动项目屎山代码进行了一波性能优化,实现了较大的性能提升.这里记录了部分近期代码优化的小技巧,这些例子仅从C++语言层面进行优化,主要在于优化类设计.减少隐含函数调用.减少拷贝等,较为基础实 ...

  4. GANF: 用于多时间序列异常检测的图增广归一化流《GRAPH-AUGMENTED NORMALIZING FLOWS FOR ANOMALY DETECTION OF MULTIPLE TIME SERIES》(异常检测、多时间序列、DAG、贝叶斯网络、归一化流)

    今天是2022年7月12日,差不多小半个月没看论文了,因为模型一直运行不起来+系统搭建的一塌糊涂,今天干脆摆烂,本咸鱼要去看新的论文了(逃避旧工作,bushi). 对了,我们放暑假了,可是我没放暑假. ...

  5. 音视频入门-6-ffmpeg小实验-从v4l2层获取PC ubuntu摄像头图像

    0. 进行本代码实验的前提 确保已经在ubuntu内正确安装了ffmpeg 手把手安装教程可以参考我的另一篇博文<音视频入门-4-ffmpeg命令快速体验音视频开发/ ffmpeg编译过程经历的 ...

  6. 智慧矿山IT智能运维自动化解决方案

    矿山企业是国民经济中的重要组成部分,其资源开发和产业链条中涉及的环节与过程非常繁琐和复杂.随着我国矿山企业规模逐年扩大,为了提高其生产效率和降低其生产成本,信息化.数字化建设成为当下矿山企业发展的重要 ...

  7. Windows平台下安装与配置MySQL9

    要在Windows平台下安装MySQL,可以使用图行化的安装包.图形化的安装包提供了详细的安装向导,以便于用户一步一步地完成对MySQL的安装.本节将详细介绍使用图形化安装包安装MySQL的方法. 1 ...

  8. 更强的RAG：向量数据库和知识图谱的结合

    传统 RAG 的局限性 经典的 RAG 架构以向量数据库(VectorDB)为核心来检索语义相似性上下文,让大语言模型(LLM)不需要重新训练就能够获取最新的知识,其工作流如下图所示: 这一架构目前广 ...

  9. Cookie、sessionStorage、localStorage的区别 ？

    共同点:都是保存在浏览器端的. 区别: 1.cookie数据始终携带在同源的http请求中,即cookie在浏览器和服务器间来回传递,而sessionStorage和Localstorage不会自动把 ...

  10. .NET高级调试 - 3.8线程操作

    简介 高级调试过程中,与线程与线程栈是打交道特别多的.因此如何查看线程与线程栈就显得至关重要了 查看线程 !Threads 使用 !t/!Threads 命令获取所有托管线程 含义 ThreadCou ...