微信小程序中canvas有什么用

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

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

一.了解canvas

     canvas 標簽默認寬度300px、高度225px。
     同一頁面中的 canvas-id 不可重復，如果使用一個已經出現過的 canvas-id，該 canvas 標簽對應的畫布將被隱藏并不再正常工作。

需要指定 canvasId，該繪圖上下文只作用于對應的 <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.創建一個 Canvas 繪圖上

下文 CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2.們來描述要在 Canvas 中繪制什么內容

ctx.setFillStyle('red')

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

3.繪制

ctx.draw()

(2).代碼

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

(3).效果

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