canvas的用法

首先创建canvas对象或者获取canvas对象，再设置画布大小,然后创建var ctx=x.getContext("2d");然后利用ctx来获取里面的属性和方

法。

<canvas id="canvas"></canvas>
 <img id="img1" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;z-index:90" />
 

1获取canvas对象

 var canvas1=document.getElementById("canvas");

2，设置画布宽高

   var  width=$(window).width();

   var height=$(window).height();

    canvas1.width=width;

    canvas1.height=height;

3.创建ctx 

var ctx=canvas1.getContext("2d");

一，....在画布上写文字

function fillText(text,left,top){

   ctx.font="30px 微软雅黑"；

  ctx.fillStyle="#fff";

  ctx.fillText(text,left,top)

}

调用       fillText("文字信息名字",width/2-15,height/10+5);  //这里的width和height是上面定义的屏幕的宽高

二，....在画布上放图片

function drawImg(src,left,top,width,height,fun){

  var img=new Image();

  img.οnlοad=function(){

      ctx.drawImage(img11,left,top,width,height);

      fun&&fun();

  };

    img.src =src; 

}

调用      drawImg("images/a.jpg",width/2-15,height/10+5,function(){

                    document.getElementById("#img1").src=canvas1.toDataUrl(); //这里把这个绘图，转化为可以长按收藏的图片，可以看到他的src

}); 

如果你需要把几张图合成一个海报，可以这样写

       var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        
         canvas.width =750 ;
         canvas.height =1624 ;

//需要几个图就调用几次drawImg。

drawImg('/static/api/img/share/posterbg.png',0,0,750,1624,()=>{
                drawImg('/static/api/img/share/logoimg.png',43,30,120,120,()=>{
                   drawImg('/static/api/img/share/qrBase64.png',200,1090,367,367,()=>{
                        // console.log(canvas.toDataURL())
                    })
                })
            })

注意如果是vue的项目，this的指向问题。

参考这个文章https://blog.youkuaiyun.com/qq_33769914/article/details/119930624

三---画圆形的图片（首先画一个圆形，然后用图片填充）

function  circleImg(src,fn) {
    
    var canvas2=document.createElement("canvas")
    var ctx2= canvas2.getContext('2d');
    var img = new Image();
    img.οnlοad=function(){
     
    var pattern = ctx.createPattern(img, "no-repeat");
    // 绘制一个圆
    ctx2.arc(50, 50, 60, 0, 2 * Math.PI);
  // ctx.drawImage(src,left, top, width ,height);  
    // 填充绘制的圆
    ctx2.fillStyle = pattern;
    ctx2.fill();    
ctx.drawImage(canvas2,width/8,14)  //width/8-左边距,14上边距
fn&&fn();
    }
    img.src = src;
    // 创建图片纹理
        
}

circleImg("images/baby.jpg",function(){    
//            document.getElementById("img1").src=canvas.toDataURL();                       
//                 }); //头像