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 font(text,left,top){

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

  ctx.fillStyle="#fff";

  ctx.fillText(txt,left,top)

}

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

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

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

  var img11=new Image();

  img11.onload=functioin(){

      ctx.drawImg(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

}); 

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

function  circleImg(src,fn) {
    
    var canvas2=document.createElement("canvas")
    var ctx2= canvas2.getContext('2d');
    var img = new Image();
    img.onload=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();                       
//                 }); //头像