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