微信小程序canvas小案例

效果如圖，簡單的畫筆

 

 

index.wxml中的代碼：

<view id="container">
  <view class="canvas_ht">
    <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="false" bindtouchstart="starChange" bindtouchmove="moveChange"></canvas>
  </view>
  <view class="canvasBtn">
    <button bindtap="clearChange">清除</button>
    

    <view class="section01">
      <text bindtap="cutWidth">-</text>
        <view class="body-view">
            <slider bindchange="slider3change" min="1" value="{{ pre.size }}" show-value/>
        </view>
      <text bindtap="addWidth">+</text>
    </view>


    <button bindtap="colorChange" data-cav="red">紅色</button>
    <button bindtap="colorChange" data-cav="blue">藍色</button>
    <button bindtap="colorChange" data-cav="yellow">黃色</button>
    <button bindtap="colorChange" data-cav="green">綠色</button>
    <button bindtap="colorChange" data-cav="#e8e8e8">背景顏色</button>
  </view>
</view>

 

index.wxss中的代碼：

.myCanvas{
  width: 100%;
  background: #e8e8e8;
  height: 80vh;
}

.canvasBtn{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.canvasBtn>button{
  width: 50%;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

.canvasBtn .section01{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.canvasBtn .section01 .body-view{
  flex: 1;
}

.canvasBtn .section01 text{
  display: block;
  height: 50rpx;
  width: 50rpx;
  border: 1px solid #e8e8e8;
  line-height: 50rpx;
  text-align: center;
  border-radius: 50%;

}

 

index.js中的代碼：

//index.js
const app = getApp()
let ctx,canvasW,canvasH;
Page({
  data: {
    pre:{
      color:"skyblue",
      size:5
    }
  },
  onLoad() {

    ctx = wx.createCanvasContext('myCanvas')
    // 兩頭圓角
    ctx.setLineCap('round')
    ctx.setLineJoin('round')
    this.canvasChange()

    // 節點查詢 微信小程序沒有dom操作，無法直接獲取元素寬高
    const query = wx.createSelectorQuery()
    query.select('.myCanvas').boundingClientRect()
    query.exec(function (res) {
      canvasW = res[0].width
      canvasH = res[0].height
    })

  },
  
  canvasChange(){
    // 線條顏色
    ctx.setStrokeStyle(this.data.pre.color)
    // 線條寬度
    ctx.setLineWidth(this.data.pre.size)
  },


  starChange(e){
    var x = e.changedTouches[0].x
    var y = e.changedTouches[0].y
    ctx.moveTo(x, y)
    
  },
  moveChange(e) {
    var x = e.changedTouches[0].x
    var y = e.changedTouches[0].y
    ctx.lineTo(x, y)
    ctx.stroke()
    ctx.draw(true)
    ctx.moveTo(x, y)
  },
  
clearChange(){
  ctx.clearRect(0, 0, canvasW, canvasH)
  ctx.draw(true)
},
addWidth(){
  var size = this.data.pre.size
  if (size>100) return
  size++
  this.setData({
    'pre.size': size
  })
  this.canvasChange()
},
cutWidth(){
  var size = this.data.pre.size
  if (size <= 1) return
  size--
  this.setData({
    'pre.size': size
  })
  this.canvasChange()
},
  colorChange(e) {
    this.setData({
      'pre.color':e.target.dataset.cav
    })

    this.canvasChange()
    },


  slider3change(e){
    this.setData({
      'pre.size': e.detail.value
    })
    this.canvasChange()
  }
})