小程序Canvas原有接口不再维护

前端精髓

共 2231字,需浏览 5分钟

 ·

2021-04-26 02:54


画布。2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护。


<!-- canvas.wxml --><canvas type="2d" id="myCanvas"></canvas>
// canvas.jsPage({  onReady() {    const query = wx.createSelectorQuery()    query.select('#myCanvas')      .fields({ node: true })      .exec((res) => {        const canvas = res[0].node        const ctx = canvas.getContext('2d')        ctx.fillStyle = 'red'        ctx.fillRect(0, 0, 100, 100)      })  }})

示例代码(旧的接口)

<!-- 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() }})


之前通过 wx.createCanvasContext('firstCanvas') 获取 Canvas 实例,现在通过 SelectorQuery 获取。并且原有接口不再维护。


Canvas 绘图上下文。


1、通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象,实现了 HTML Canvas 2D Context 定义的属性、方法。


2、通过 Canvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象,实现了 WebGL 1.0 定义的所有属性、方法、常量。


现在小程序 Canvas API 与 Web浏览器 Canvas API 保持一致,目的是为了两端对齐。小程序 Canvas API 接口不再维护,需要使用 Web浏览器 Canvas API 。所以以后查看 API 文档的时候请迁移到 MDN 上查询。


浏览器中的 Canvas 代码可以直接在小程序上使用啦!


浏览 22
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报