這篇文章給大家分享的是有關(guān)微信小程序中canvas有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)格爾木免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

canvas 元素用于在網(wǎng)頁上繪制圖形。HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制2D圖像。本文主要和大家分享微信小程序canvas基礎(chǔ)詳解，希望能幫助到大家。

一.了解canvas

     canvas 標(biāo)簽?zāi)J(rèn)寬度300px、高度225px。
     同一頁面中的 canvas-id 不可重復(fù)，如果使用一個已經(jīng)出現(xiàn)過的 canvas-id，該 canvas 標(biāo)簽對應(yīng)的畫布將被隱藏并不再正常工作。

需要指定 canvasId，該繪圖上下文只作用于對應(yīng)的 <canvas/>

<!--canvas.wxml-->
<view class="container">
	<canvas canvas-id="myCanvas" class="myCanvas" ></canvas>
</view>

/**canvas.wxss*/
.myCanvas{
    border: 1px solid #ccc;
    width:100%;
    height:250px;
}

二.在canvas中繪制圖形

(1).步驟

wxml中：

<canvas canvas-id="myCanvas" clas
s="myCanvas" ></canvas>

1.創(chuàng)建一個 Canvas 繪圖上

下文 CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2.們來描述要在 Canvas 中繪制什么內(nèi)容

ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)

3.繪制

ctx.draw()

(2).代碼

//canvas.js 
//獲取應(yīng)用實例  
var app = getApp()  
Page({
	onLoad: function() {
		const ctx = wx.createCanvasContext('myCanvas');
		ctx.setFillStyle('red');
		ctx.fillRect(10, 10, 150, 75);
		ctx.draw();
	}
})

(3).效果

感謝各位的閱讀！關(guān)于“微信小程序中canvas有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁標(biāo)題：微信小程序中canvas有什么用
網(wǎng)站URL：http://www.chinadenli.net/article40/pidieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、電子商務(wù)、服務(wù)器托管、網(wǎng)站導(dǎo)航、手機網(wǎng)站建設(shè)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)