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 plan9 汇编：说透函数栈

    原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 函数是 Go 的一级公民,本文从汇编角度出发看看我们常用的一些函数在干什么. 1. 函数 1.1 main 函数 在 main 函数中计算两数之 ...

  2. windows 误删除\AppData\Local\文件夹后 异常的修复

    背景:清除Temp文件夹时,路径复制错误,少复制了Temp,导致删除了文件夹 C:\Users\username\AppData\Local\ 异常现象: 估计删除Local文件夹后,出现的问题应该会 ...

  3. pyinstaller 打包成 exe

    生成 spec 和可执行文件: pyinstaller --onefile your_file.py 如果需要修改生成的spec文件,则后续可以这样运行: pyinstaller -F your_fi ...

  4. Coursera self-driving2, State Estimation and Localization Week3, GNSS IMU for pose estimation

    如何表示旋转?三种方法 1. rotation matrix 2. unit quaternions 四元数 3. Euler angles 4. compare 坐标系 ECIF - Earth-C ...

  5. Asp.net Core 学习笔记 Azure Storage

    更新: 2021-07-22 使用 Azure storage 以后, 还要解决一个 url 的问题. 文件自然是通过我们的 domain 来访问才合理丫. 这个是 azure 的 url : htt ...

  6. python 属性装饰器和对应的setter方法，属性的封装和安全性控制

    当我们在类中定义属性时,通常希望能够对属性的读取和写入进行控制,以确保数据的完整性和安全性.属性装饰器和对应的setter方法提供了一种实现属性封装和安全性控制的方法. 属性装饰器是Python的一种 ...

  7. Spring技术书的代码资源下载

    我是清华社编辑,这些资源获得作者授权,免费提供给读者个人学习使用.禁止任何形式的商用. 二维码用微信扫,按提示填写你的邮箱,转到电脑上打开邮箱下载.清华国企网盘,比较快速.安全.放心下载. 百度网盘链 ...

  8. 深入理解Redis锁与Backoff重试机制在Go中的实现

    目录 Redis锁的深入实现 Backoff重试策略的深入探讨 结合Redis锁与Backoff策略的高级应用 具体实现 结论 在构建分布式系统时,确保数据的一致性和操作的原子性是至关重要的.Redi ...

  9. 墨天轮沙龙 | 腾讯云陈昊：TDSQL-C Serverless应用与技术实践

    导读 数据库的发展由对性能的要求,逐步发展为对更为极致成本的要求,Serverless数据库是在高性能云数据库之上的极致成本优化方案.[墨天轮数据库沙龙-Serverless专场]邀请到腾讯云数据库产 ...

  10. C# webapi 跨域

    #region 启用跨域访问 app.UseCors(builder => builder .AllowAnyMethod() .SetIsOriginAllowed(_ => true) ...