今天写一下关于canvas的东西

canvas是微信小程序中的绘图的一个工具,也就是平时我们说的画布,我们画画首先得有画布,而canvas充当的就是画布的责任接下来就先简单的说一下画布的一些属性

属性名            类型         默认值           说明
canvas-id       String                canvas 组件的唯一标识符
disable-scroll  Boolean       false   当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart  EventHandle           手指触摸动作开始
bindtouchmove   EventHandle           手指触摸后移动
bindtouchend    EventHandle           手指触摸动作结束
bindtouchcancel EventHandle           手指触摸动作被打断，如来电提醒，弹窗
bindlongtap     EventHandle           手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror       EventHandle           当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

接下来开始亮代码了

(1).简单的矩形,线和圆的绘制

<!-- wxml -->
<canvas class='first-style' canvas-id="first-canvas" binderror="canvasIdErrorCallback"></canvas>
<!--wxss-->
.first-style{
  width: 100%;
  height: 100vh;
  background: yellow;
}
<!--js-->
onReady: function () {
    //界面渲染完成后开始进入画图
    var context = wx.createCanvasContext('first-canvas')
    //setStrokeStyle设置线的颜色(正方形的线的颜色,绿色)设置了颜色后,后面只要是不更改色值一直沿用当前的色值
    context.setStrokeStyle("#00ff00")
    //设置线的宽度(正方形)
    context.setLineWidth(5)
    //设置形状rect(方形)
    context.rect(0, 0, 200, 200)
    //开始描边stroke
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    /*
    参数的解释arc
    第一个参数,圆的x坐标(圆心)
    第二个参数,圆的y坐标(圆心)
    第三个参数,圆的半径
    第四个参数,起始弧度，单位弧度（在3点钟方向）
    第五个参数,终止弧度
    第六个参数,可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
     */
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    //draw必须执行这个函数不然的话不会执行绘图的
    context.draw()
    console.log(context);
  },

注意:如果不想从默认的起点🕒三点方向开始画,那你在修改第三个参数的时候需要计算之前的那个context.moveto的位置要和起始角度的位置一致,否则就会多出来一条线效果如下

划线简单了两行代码搞定

三次方贝塞尔曲线路径

参数     类型           说明
cp1x    Number  第一个贝塞尔控制点的 x 坐标
cp1y    Number  第一个贝塞尔控制点的 y 坐标
cp2x    Number  第二个贝塞尔控制点的 x 坐标
cp2y    Number  第二个贝塞尔控制点的 y 坐标
x       Number  结束点的 x 坐标
y       Number  结束点的 y 坐标

三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，
第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，
那么请使用 beginPath()和 moveTo()方法来定义开始点。

在画布上绘制图片

有两种绘图的方式

第一种这种方法是说的需要从外部选择资源绘制

  wx.chooseImage({
  success: function (res) {
    context.drawImage(res.tempFilePaths[0], 0, 0, 300, 200);
    context.draw()
     },
  })

第二种从当前的工程目录中选择资源绘制

context.drawImage("../../images/icons/icon_search_remove.png", 0, 0, 300, 200);
   context.draw()
   console.log(context);

绘制文字

   context.setFontSize(20)
   context.fillText('20', 20, 20)
   context.draw()

后期如果发现什么难点的话会继续更新!如果有不理解的可以留言解答