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

添加图片网络图片：

wxml文件中：

<canvas canvas-id="canvas" style="border:1px solid #f00;height: 400rpx;  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;  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';
        }