首頁  >  文章  >  微信小程式  >  微信小程式canvas基礎詳解

微信小程式canvas基礎詳解

小云云
小云云原創
2018-03-17 13:56:367654瀏覽

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

一.了解canvas


      canvas 標籤預設寬度300px、高度225px。
      同一頁面中的 canvas-id 不可重複,如果使用一個已經出現過的 canvas-id,則該 canvas 標籤對應的畫布將被隱藏並不再正常運作。

需要指定canvasId,該繪圖上下文只作用於對應的 9eb6a00f944b38c7333d032ed32cee03


# #
<!--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(&#39;myCanvas&#39;);
		ctx.setFillStyle(&#39;red&#39;);
		ctx.fillRect(10, 10, 150, 75);
		ctx.draw();
	}
})

(3).效果

#相關推薦:

#js與canvas合成圖片做出微信公眾號海報功能

######## #怎麼用canvas來繪製弧線和圓######################用H5的canvas做出彈幕效果##########

以上是微信小程式canvas基礎詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn