canvas在小程序中添加图片（本地图片/网络图片），在html中添加图片

添加图片网络图片：

wxml文件中：

<canvas canvas-id="canvas" style="border:1px solid #f00;height: 400rpx; width: 400rpx;"></canvas>

js文件中：

  onShow: function () {

wx.getImageInfo({//getImageInfo获取图片信息。网络图片需先配置download域名才能生效。

src: \'http://chuantu.xyz/t6/741/1605489019x2073447983.png\',

success: function (res) {

const ctx = wx.createCanvasContext(\'canvas\');

let width = 400;

let height = 400;

ctx.drawImage(res.path, 0, 0, width, height);//res.path网络图片请求回来的路径

ctx.strokeText(\'shuju\')

ctx.font = "48px serif";

ctx.textBaseline = "hanging";

ctx.strokeText("Hello world", 0, 100);

console.log(ctx,\'----------画图函数调用成功\')

ctx.draw();//绘制背景图片

fail: function (err) {

console.log(err)

}

})

添加图片本地图片：

wxml文件中：

<canvas canvas-id="canvas" style="border:1px solid #f00;height: 400rpx; width: 400rpx;"></canvas>

js文件中：

onShow: function () {

const ctx = wx.createCanvasContext(\'canvas\');

let width = 400;

let height = 400;

let bgPicturePath = \'../../img/天然气.jpg\';//图片路径不要出错

ctx.drawImage(bgPicturePath, 0, 0, width, height);

ctx.strokeText(\'shuju\')

ctx.font = "48px serif";

ctx.textBaseline = "hanging";

ctx.strokeText("Hello world", 0, 100);

console.log(ctx,\'----------画图函数调用成功\')

ctx.draw();//绘制背景图片

在html插入图片：

hrml代码：

<canvas id="canvas" style="border:1px solid #f00;"></canvas>

js代码：

        window.onload=function(){
            draw()
        }
        function draw() {
            var ctx = document.getElementById(\'canvas\').getContext(\'2d\');
            var img = new Image();
            img.onload = function(){
            ctx.drawImage(img,0,0);
            ctx.beginPath();
            ctx.moveTo(30,96);
            ctx.lineTo(70,66);
            ctx.lineTo(103,76);
            ctx.lineTo(170,15);
            ctx.stroke();
            }
            console.log(\'------------这是图片\')
            img.src = \'http://chuantu.xyz/t6/741/1605489019x2073447983.png\';
        }