小程序Canvas

最新推荐文章于 2024-01-19 23:17:18 发布

十一T_T

最新推荐文章于 2024-01-19 23:17:18 发布

阅读量166

点赞数

分类专栏：小程序前端

本文链接：https://blog.csdn.net/XJ5210224/article/details/83552460

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

小程序

6 篇文章 0 订阅

订阅专栏

<view class = "canvas-area">
    <canvas canvas-id = "myCanvas" class = "myCanvas" disable-scroll = "false" bindtouchstart = "touchStart" bindtouchmove = "touchMove" />
</view>
<view>
    <view class = "box box1" bindtap = "penSelect" data-param = "5"></view>
    <view class = "box box2" bindtap = "colorSelect" data-param = "#c03"></view>
</view>
let ctx;
Page({
    data:{
        pen:{
            color:'#000',
            lineWidth: 5
        }
    },
    onload:function (options) {
        ctx = wx.createCanvasContext('myCanvas')
        ctx.setStrokeStyle(this.data.pen.color)
        ctx.setLineWidth(this.data.pen.lineWidth)
        ctx.setLineCap('round')
        ctx.setLineJoin('round')
    },
    touchStart(e){
        ctx.moveTo(e.touches[0].x,e.touches[0].y)
    },
    touchMove(e){
        let x = e.touches[0].x
        let y = e.touches[0].y
        ctx.lineTo(x,y)
        ctx.stroke()
        ctx.draw(true)
        ctx.moveTo(x,y)
    },
    penSelect(e){
        console.log(e)
        this.setData({
            'pen.lineWith':e.target.dataset.param
        })
    },
    colorSelect(e){
        this.setData({
            'pen.color':e.target.dataset.param
        })
    }
})