有問題可以掃碼加我微信，有償解決問題。承接小程式開發。

微信小程式開發交流qq群   173683895  、 526474645 ；

正文：

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

我們先了解一下canvas元件：

wxml:

<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' binderror="canvasIdErrorCallback" disable_scroll/>
 

注：

1. canvas 標籤預設寬度300px、高度225px
2. 同一頁面中的 canvas-id 不可重複，如果使用一個已經出現過的 canvas-id，該 canvas 標籤對應的畫布將被隱藏並不再正常工作
3. 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.建立carvas例項物件，方便後續使用。
    my_carvas.setStrokeStyle('red') //設定邊框顏色。
    my_carvas.moveTo(20,100)  //設定繪畫路線的起點 （20,100）>>>（當前畫布物件的 x 軸，當前畫布物件的 y 軸）
    my_carvas.lineTo(120, 100)  //增加一個新點，然後建立一條從上次指定點到目標點的線。（120,100）>>>（當前畫布物件的 x 軸，當前畫布物件的 y 軸)
    my_carvas.stroke()  //畫出當前路徑的邊框。預設顏色色為黑色。
    my_carvas.draw()   //將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。
  }
})
 

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

canvas標籤屬性：

畫布。

注意事項：Bug & Tip

1. tip: canvas 元件是由客戶端建立的原生元件，它的層級是最高的，不能通過 z-index 控制層級。
2. tip: 請勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 元件。
3. tip: css 動畫對 canvas 元件無效。
4. bug: 避免設定過大的寬高，在安卓下會有crash的問題