微信小程序之畫布canvas組件的介紹和基本使用

此文章主要是對canvas組件的介紹與基本的使用。在組件中繪畫了一條固定的直線。

我們先了解一下canvas組件：

wxml:
<canvas binderror="canvasIdErrorCallback" bindtouchend="EventHandle" bindtouchstart="EventHandleStart" canvas-id="myCanvas" class="myCanvas" disable_scroll=""></canvas
注：

canvas 標簽默認寬度300px、高度225px同一頁面中的 canvas-id 不可重復，如果使用一個已經(jīng)出現(xiàn)過的 canvas-id，該 canvas 標簽對應的畫布將被隱藏并不再正常工作disable_scroll屬性可以禁止畫布在移動時且有手勢事件時，禁止屏幕滾動以及下拉刷新

wxss:

.myCanvas{
  border: 1px solid; //給一個邊框
}

咱們看一下js中是怎么對carvas操作的

//test.js
Page({
  data: {},
  onLoad: function () {},
  onReady:function(){
    var my_carvas = wx.createCanvasContext('myCanvas', this) //1.創(chuàng)建carvas實例對象，方便后續(xù)使用。
    my_carvas.setStrokeStyle('red') //設(shè)置邊框顏色。
    my_carvas.moveTo(20,100)  //設(shè)置繪畫路線的起點 （20,100）>>>（當前畫布對象的 x 軸，當前畫布對象的 y 軸）
    my_carvas.lineTo(120, 100)  //增加一個新點，然后創(chuàng)建一條從上次指定點到目標點的線。（120,100）>>>（當前畫布對象的 x 軸，當前畫布對象的 y 軸)
    my_carvas.stroke()  //畫出當前路徑的邊框。默認顏色色為黑色。
    my_carvas.draw()   //將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。
  }
})

設(shè)置起點與終點，繪畫一條直線如圖：(由左至右100個像素點)

canvas標簽屬性：

畫布。

注意事項：Bug & Tip

tip:canvas組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。tip: 請勿在scroll-view、swiper、picker-view、movable-view中使用canvas組件。tip:css動畫對canvas組件無效。bug: 避免設(shè)置過大的寬高，在安卓下會有crash的問題