以下将展示微信小程序之画布canvas源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。 功能描述: 画布。2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护。旧版本可参考 旧版画布迁移指南 进行迁移。 属性说明: Bug & Tip 1.tip:canvas 标签默认宽度300px、高度150px 2.tip:同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的画布将被隐藏并不再正常工作 3.tip:请注意原生组件使用限制 4.tip:开发者工具中默认关闭了 GPU 硬件加速,可在开发者工具的设置中开启“硬件加速”提高 WebGL 的渲染性能 5.tip: WebGL 支持通过 getContext('webgl', { alpha: true }) 获取透明背景的画布 6.tip: Canvas 2D(新接口)需要显式设置画布宽高,默认:300*150,最大:1365*1365 7.bug:避免设置过大的宽高,在安卓下会有 crash 的问题 8.tip: iOS 暂不支持pointer-events 9.tip:在 mac 或 windows 小程序下,若当前组件所在的页面或全局开启了enablePassiveEvent 配置项,该内置组件可能会出现非预期表现(详情参考enablePassiveEvent 文档) Canvas 2D 示例代码 <!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas> // 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示例代码 <!-- canvas.wxml --> <canvas type="webgl" id="myCanvas"></canvas> // 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) }) } }) 示例代码(旧的接口) <!-- canvas.wxml --> <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas> <!--当使用绝对定位时,文档流后边的 canvas 的显示层级高于前边的 canvas --> <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas> <!--因为canvas-id 与前一个 canvas 重复,该canvas 不会显示,并会发送一个错误事件到 AppService --> <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas> 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() } }) 版权声明: 本站所有内容均由互联网收集整理、上传,如涉及版权问题,请联系我们第一时间处理。 原文链接地址:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html |
|
来自: MLC061 > 《微信小程序官方组件展示》