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';
        }