怎么用canvas組件繪畫一條固定的直線

這篇文章主要講解了“怎么用canvas組件繪畫一條固定的直線”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用canvas組件繪畫一條固定的直線”吧！

我們先了解一下canvas組件：

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

canvas 標簽默認寬度300px、高度225px同一頁面中的 canvas-id 不可重復，如果使用一個已經出現過的 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.創建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

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

感謝各位的閱讀，以上就是“怎么用canvas組件繪畫一條固定的直線”的內容了，經過本文的學習后，相信大家對怎么用canvas組件繪畫一條固定的直線這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！