建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序畫(huà)布 canvas
基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持，低版本需做 兼容處理。
成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作服務(wù)，網(wǎng)站設(shè)計(jì)，網(wǎng)站托管運(yùn)營(yíng)等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競(jìng)爭(zhēng)對(duì)手中脫穎而出成都創(chuàng)新互聯(lián)公司。
畫(huà)布。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 屬性），同時(shí)支持同層渲染，原有接口不再維護(hù)。相關(guān)api：獲取 canvas 實(shí)例。
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 |
|---|---|---|---|---|---|
| type | string | 否 | 指定 canvas 類型，支持 2d (2.9.0) 和 webgl (2.7.0) | 2.7.0 | |
| canvas-id | string | 否 | canvas 組件的唯一標(biāo)識(shí)符，若指定了 type 則無(wú)需再指定該屬性 | 1.0.0 | |
| disable-scroll | boolean | false | 否 | 當(dāng)在 canvas 中移動(dòng)時(shí)且有綁定手勢(shì)事件時(shí)，禁止屏幕滾動(dòng)以及下拉刷新 | 1.0.0 |
| bindtouchstart | eventhandle | 否 | 手指觸摸動(dòng)作開(kāi)始 | 1.0.0 | |
| bindtouchmove | eventhandle | 否 | 手指觸摸后移動(dòng) | 1.0.0 | |
| bindtouchend | eventhandle | 否 | 手指觸摸動(dòng)作結(jié)束 | 1.0.0 | |
| bindtouchcancel | eventhandle | 否 | 手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗 | 1.0.0 | |
| bindlongtap | eventhandle | 否 | 手指長(zhǎng)按 500ms 之后觸發(fā)，觸發(fā)了長(zhǎng)按事件后進(jìn)行移動(dòng)不會(huì)觸發(fā)屏幕的滾動(dòng) | 1.0.0 | |
| binderror | eventhandle | 否 | 當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā) error 事件，detail = {errMsg} | 1.0.0 |
Bug & Tip
- tip：canvas 標(biāo)簽?zāi)J(rèn)寬度300px、高度150px
- tip：同一頁(yè)面中的 canvas-id 不可重復(fù)，如果使用一個(gè)已經(jīng)出現(xiàn)過(guò)的 canvas-id，該 canvas 標(biāo)簽對(duì)應(yīng)的畫(huà)布將被隱藏并不再正常工作
- tip：請(qǐng)注意原生組件使用限制
- tip：開(kāi)發(fā)者工具中默認(rèn)關(guān)閉了 GPU 硬件加速，可在開(kāi)發(fā)者工具的設(shè)置中開(kāi)啟“硬件加速”提高 WebGL 的渲染性能
- tip: WebGL 支持通過(guò) getContext('webgl', { alpha: true }) 獲取透明背景的畫(huà)布
- tip: Canvas 2D（新接口）需要顯式設(shè)置畫(huà)布寬高 (默認(rèn)為 300x150)
- bug: 避免設(shè)置過(guò)大的寬高，在安卓下會(huì)有crash的問(wèn)題
Canvas 2D 示例代碼
在開(kāi)發(fā)者工具中預(yù)覽效果
// canvas.js
Page({
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
}
})
WebGL 示例代碼
在開(kāi)發(fā)者工具中預(yù)覽效果
// canvas.js
Page({
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas').node().exec((res) => {
const canvas = res[0].node
const gl = canvas.getContext('webgl')
gl.clearColor(1, 0, 1, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
})
}
})
示例代碼（舊的接口）
在開(kāi)發(fā)者工具中預(yù)覽效果 下載
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 獲取繪圖上下文 context
var context = wx.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
})分享文章：創(chuàng)新互聯(lián)小程序教程：微信小程序畫(huà)布 canvas
網(wǎng)頁(yè)網(wǎng)址：http://m.5511xx.com/article/cccdoei.html
