您现在的位置是:网站首页>>微信>>微信小程序

微信小程序组件——画布

发布时间:2019-08-10 11:06:50作者:wangjian浏览量:29点赞量:0

    canvas组件

    属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

    例:

    <!-- wxml -->
    <canvas 
    style="width: 300px; height: 200px;" //canvas组件样式设置
    canvas-id="firstCanvas" //canvas 组件的唯一标识符
    binderror="canvasIdErrorCallback" //当发生错误时触发 error 事件
    ></canvas>
    // js
    Page({
    canvasIdErrorCallback: function (e) {
    //当发生错误时触发 error 事件
    console.error(e.detail.errMsg)
    },
    onReady: function (e) {
    // 使用 wx.createContext获取绘图上下文context,firstCanvas为canvas组件的canvas-id值
    var context = wx.createCanvasContext('firstCanvas')
    //设置边框颜色
    context.setStrokeStyle("#00ff00")
    //设置线条的宽度
    context.setLineWidth(5)
    //创建一个矩形路径,参数分别为context.rect(x,y,width,height)
    context.rect(0, 0, 200, 200)
    //画出当前路径的边框。默认颜色色为黑色
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    //把路径移动到画布中的指定点,不创建线条,参数分别为context.moveTo(x,y)
    context.moveTo(160, 100)
    //创建一条弧线,参数分别为context.arc(x(圆心的 x 坐标),y(圆心的 y 坐标),r(圆的半径),sAngle(起始弧度,0表示在3点钟方向), eAngle(终止弧度),counterclockwise(弧度的方向是否是逆时针))
    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()
    //将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中
    context.draw()
    }
    })

    现象如下:

    image.png

0 +1