Chinaunix首页 | 论坛 | 博客
  • 博客访问: 657181
  • 博文数量: 210
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2062
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(210)

文章存档

2020年(2)

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: JavaScript

2020-01-20 16:54:18

小程序 Canvas arcTo 文档连接地址
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arcTo.html

Canvas arcTo 
    CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)
    参数:
            number x1: 第一个控制点的 x 轴坐标
            number y1: 第一个控制点的 y 轴坐标
            number x2: 第二个控制点的 x 轴坐标
            number y2: 第二个控制点的 y 轴坐标
            number radius: 圆弧的半径
            字面的理解:画圆弧需要两个坐标点和圆弧的半径 5个参数 ,圆弧的半径不难理解,前四个参数到底指的是那两个点的坐标,百思不得解

一张图了然:

可以理解为:这条弧线的两条切线的焦点为:第一个控制点,结束点为:第二个控制点
代码如下:

点击(此处)折叠或打开

  1. strokeRect: function(color){
  2.     const ctx = wx.createCanvasContext('shareCanvas1'); //获取上下文的 ctx 
  3.     var _this=this; //切换 this 的指针
  4.     ctx.beginPath()
  5.     ctx.setStrokeStyle(color) 圆弧的颜色
  6.     ctx.fill()
  7.     let p = {x: sx, y: sy} //开始位置的zuobia
  8.     let r = 10 //弧线的半径
  9.     let num = 120//边长
  10.     let numR = r + num
  11.     ctx.moveTo(p.x, p.y) //开始位置
  12.     ctx.arcTo(p.x + num + r, p.y, p.x + numR, p.y + r, r)//第一个圆弧 右上
  13.     ctx.lineTo(p.x + num + r, p.y + numR)
  14.     ctx.arcTo(p.x + num + r, p.y + numR + r, p.x + num, p.y + numR + r, r)//第一个圆弧 右下
  15.     ctx.lineTo(p.x, p.y + numR + r)
  16.     ctx.arcTo(p.x - r, p.y + numR + r, p.x - r, p.y + numR, r)//第一个圆弧 左下
  17.     ctx.lineTo(p.x - r, p.y + r)
  18.     ctx.arcTo(p.x - r, p.y, p.x, p.y, r)//第一个圆弧 左上
  19.     ctx.stroke();
  20.   },
效果图:

参照的链接地址:https://codeplayer.vip/p/j7scu






    
阅读(376) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~