canvas画布设置背景图片
功能:
canvas画布设置背景图片
代码:
wxml文件
注意:canvas-id=“canvas”
<!--index.wxml-->
<view class="container">
<canvas style="background-color:#ddd" canvas-id="canvas">
</canvas>
</view>
js文件
//index.js
const app = getApp()
Page({
onLoad: function () {
let that = this;
that.bgImg();
},
/** canvas设置背景图片 */
bgImg: function () {
//注意这里的 canvas 要与wxml文件的canvas-id属性命名一样
const ctx = wx.createCanvasContext('canvas');
let width = 500;
let height = 300;
let bgPicturePath = "../../img/bg_analyse.png";//图片路径不要出错
ctx.drawImage(bgPicturePath, 0, 0, width, height);
ctx.draw();//绘制背景图片
}
})
加上背景图片没有效果原因有两个:
1.wxml文件的canvas 标签两个属性只能存在一个,分别是 canvas-id 与 type
2.图片路径出错
效果展示: