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

這篇文章主要講解了“怎么用canvas組件繪畫一條固定的直線”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用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)過的 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í)是最高的，不能通過 z-index 控制層級(jí)。tip: 請(qǐng)勿在scroll-view、swiper、picker-view、movable-view中使用canvas組件。tip:css動(dòng)畫對(duì)canvas組件無效。bug: 避免設(shè)置過大的寬高，在安卓下會(huì)有crash的問題

感謝各位的閱讀，以上就是“怎么用canvas組件繪畫一條固定的直線”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用canvas組件繪畫一條固定的直線這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！