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

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

我們先了解一下canvas組件：

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

canvas 標(biāo)簽?zāi)J(rèn)寬度300px、高度225px同一頁(yè)面中的 canvas-id 不可重復(fù)，如果使用一個(gè)已經(jīng)出現(xiàn)過(guò)的 canvas-id，該 canvas 標(biāo)簽對(duì)應(yīng)的畫布將被隱藏并不再正常工作disable_scroll屬性可以禁止畫布在移動(dòng)時(shí)且有手勢(shì)事件時(shí)，禁止屏幕滾動(dòng)以及下拉刷新

wxss:

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

咱們看一下js中是怎么對(duì)carvas操作的

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

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

canvas標(biāo)簽屬性：

畫布。

注意事項(xiàng)：Bug & Tip

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