JavaScript中使用canvas

1.利用canvas繪製Image

      var canvas = document.getElementById("myCanvas");
        var image = new Image();
        canvas.width = image.width || 132;
        canvas.height = image.height || 132;
        var ctx = canvas.getContext("2d");
        // canvas上繪製圖片，是一個異步函數；
        image.onload = function () {
            ctx.drawImage(image,0,0);
            canvas = null;
        }
        image.src = 'https://wx.qlogo.cn/mmopen/vi_32/eANbKH1RvLW088qRtM96QLWWkgysk4T2TErm4F0lHcnhu2txL6Kk0PJokrxT4TLUmEtAZ2xqtxwTRIPWoZZ9RQ/132';

效果圖：

2.利用canvas將Image轉換爲Base64位編碼符號

 image.onload = function () {
            ctx.drawImage(image,0,0);
           // 獲取img的base64編碼
            var imgData = canvas.toDataURL();
            canvas = null;
        }

 

3.在img圖片上添加文字

  var canvas = document.getElementById("myCanvas");
        var image = new Image();
        canvas.width = image.width || 132;
        canvas.height = image.height || 132;
        var ctx = canvas.getContext("2d");
        var text = "Hello World";
        // canvas上繪製圖片，是一個異步函數；
        image.onload = function () {
            ctx.drawImage(image,0,0);
            ctx.font = '20px Arial';
            ctx.fillStyle = "#FF0000";
            ctx.fillText(text,10,66);
            canvas = null;
        }
        image.src = 'https://wx.qlogo.cn/mmopen/vi_32/eANbKH1RvLW088qRtM96QLWWkgysk4T2TErm4F0lHcnhu2txL6Kk0PJokrxT4TLUmEtAZ2xqtxwTRIPWoZZ9RQ/132';

 

fillText()必須在drawImage()方法後執行，避免圖片擋住了文字；同時，對ctx的font、fillStyle等設置也必須在異步函數裏面執行纔可以。

效果圖：

4.將圖片以圓形的方式展示

 var canvas = document.getElementById("myCanvas");
        var image = new Image();
        canvas.width = image.width || 132;
        canvas.height = image.height || 132;
        var ctx = canvas.getContext("2d");
        var text = "Hello World";
        // canvas上繪製圖片，是一個異步函數；
        image.onload = function () {
            var circle = {
                x: canvas.width/2,
                y:canvas.height/2,
                r:canvas.width/2
            };
            // 清除canvas上的矩形
            ctx.clearRect(0,0,canvas.width,canvas.height);
            //開始畫圓，並對image圖片進行剪切
            ctx.save();
            ctx.beginPath();
            ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false);
            ctx.clip();
            ctx.drawImage(image,0,0);
            ctx.font = '20px Arial';
            ctx.fillStyle = "#FF0000";
            ctx.fillText(text,10,66);
            ctx.restore();
            canvas = null;
        }
        image.src = 'https://wx.qlogo.cn/mmopen/vi_32/eANbKH1RvLW088qRtM96QLWWkgysk4T2TErm4F0lHcnhu2txL6Kk0PJokrxT4TLUmEtAZ2xqtxwTRIPWoZZ9RQ/132';

將矩形圖片轉換爲圓形圖片，參考博客地址爲：https://www.cnblogs.com/tianma3798/p/9029505.html