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('myCanvas'); ctx.setFillStyle('red'); ctx.fillRect(10, 10, 150, 75); ctx.draw(); } })
(3).效果
######## #怎麼用canvas來繪製弧線和圓######################用H5的canvas做出彈幕效果##########以上是微信小程式canvas基礎詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!