<canvas type="2d" id="myCanvas" style="width: 100%;height: 100vh"></canvas>
js
Page({
onReady:function () {
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)
// 到这里就可以直接绘制
let image = canvas.createImage();//创建iamge实例
image.src = '引入本地的图片背景图'; // 引入本地图片
image.onload = function () {
ctx.drawImage(image, 0, 0, 289, 370); // 背景图
}
})
微信小程序中使用canvas绘制2D图像,
该文章介绍了在微信小程序中,如何利用wx.createSelectorQuery选取canvas元素,获取其尺寸并根据设备像素比调整大小。然后使用getContext(2d)获取2D渲染上下文,绘制本地图片作为背景。在image.onload事件中调用drawImage方法进行绘制。
3741

被折叠的 条评论
为什么被折叠?



