Canvas 画布

您所在的位置：网站首页 › 长方形海报尺寸 › Canvas 画布

Canvas 画布

2023-09-03 02:53| 来源: 网络整理| 查看: 265

# Canvas 画布

canvas 组件提供了绘制界面，可以在之上进行任意绘制

# 基础使用 # 第一步：在 WXML 中添加 canvas 组件

首先需要在 WXML 中添加 canvas 组件。

指定 id="myCanvas" 唯一标识一个 canvas，用于后续获取 Canvas 对象。

指定 type 用于定义画布类型，本例子使用 type="2d" 示例。

# 第二步：获取 Canvas 对象和渲染上下文 wx.createSelectorQuery() .select('#myCanvas') // 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node // 渲染上下文 const ctx = canvas.getContext('2d') })

通过 SelectorQuery 选择上一步的 canvas，可以获取到 Canvas 对象。

再通过 Canvas.getContext，我们可以获取到渲染上下文 RenderingContext。

后续的画布操作与渲染操作，都需要通过这两个对象来实现。

# 第三步：初始化 Canvas wx.createSelectorQuery() .select('#myCanvas') // 在 WXML 中填入的 id .fields({ node: true, size: true }) .exec((res) => { // Canvas 对象 const canvas = res[0].node // 渲染上下文 const ctx = canvas.getContext('2d') // Canvas 画布的实际绘制宽高 const width = res[0].width const height = res[0].height // 初始化画布大小 const dpr = wx.getWindowInfo().pixelRatio canvas.width = width * dpr canvas.height = height * dpr ctx.scale(dpr, dpr) })

canvas 的宽高分为渲染宽高和逻辑宽高：

渲染宽高为 canvas 画布在页面中所实际占用的宽高大小，即通过对节点进行 boundingClientRect 请求获取到的大小。逻辑宽高为 canvas 在渲染过程中的逻辑宽高大小，如绘制一个长方形与逻辑宽高相同，最终长方形会占满整个画布。逻辑宽高默认为 300 * 150。

不同的设备上，存在物理像素和逻辑像素不相等的情况，所以一般我们需要用 wx.getWindowInfo 获取设备的像素比，乘上 canvas 的渲染大小，作为画布的逻辑大小。

# 第四步：进行绘制

在开发者工具中预览效果

// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文 // 清空画布 ctx.clearRect(0, 0, width, height) // 绘制红色正方形 ctx.fillStyle = 'rgb(200, 0, 0)'; ctx.fillRect(10, 10, 50, 50); // 绘制蓝色半透明正方形 ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillRect(30, 30, 50, 50);

通过渲染上下文上的绘图 api，我们可以在画布上进行任意的绘制。

# 进阶使用 # 绘制图片

在开发者工具中预览效果

// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文 // 图片对象 const image = canvas.createImage() // 图片加载完成回调 image.onload = () => { // 将图片绘制到 canvas 上 ctx.drawImage(image, 0, 0) } // 设置图片src image.src = 'https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png'

通过 Canvas.createImage 我们可以创建图片对象并加载图片。当图片加载完成触发 onload 回调之后，使用 ctx.drawImage 即可将图片绘制到 canvas 上。

# 生成图片

在开发者工具中预览效果

// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文 // 绘制红色正方形 ctx.fillStyle = 'rgb(200, 0, 0)'; ctx.fillRect(10, 10, 50, 50); // 绘制蓝色半透明正方形 ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillRect(30, 30, 50, 50); // 生成图片 wx.canvasToTempFilePath({ canvas, success: res => { // 生成的图片临时文件路径 const tempFilePath = res.tempFilePath }, })

通过 wx.canvasToTempFilePath 接口，可以将 canvas 上的内容生成图片临时文件。

# 帧动画

在开发者工具中预览效果

// 省略上面初始化步骤，已经获取到 canvas 对象和 ctx 渲染上下文 const startTime = Date.now() // 帧渲染回调 const draw = () => { const time = Date.now() // 计算经过的时间 const elapsed = time - startTime // 计算动画位置 const n = Math.floor(elapsed / 3000) const m = elapsed % 3000 const dx = (n % 2 ? 0 : 1) + (n % 2 ? 1 : -1) * (m // 省略上面初始化步骤，已经获取到 canvas 对象 const gl = canvas.getContext('webgl') // 获取 webgl 渲染上下文

【本文地址】

Canvas 画布

Canvas 画布

今日新闻

推荐新闻