canvas画布创建图片

获取元素
var can = document.getElementsByTagName(‘canvas’)[0];
绘制画布上下文
var context = can.getContext(‘2d’);
创建图片对象
var image = new Image();
监听图片加载
image.onload = function(){
绘制图片 有三种情况 使用其中的一种即可

1.三个参数 第一个参数是绘制的图片对象
后两个参数是在画布上的起始点坐标
context.drawImage(image,50,50);

2.五个参数 第一个参数是绘制的图片对象
二三个参数是在画布上的起始点坐标
四五个参数是画布上绘制图片大小
context.drawImage(image,50,50,300,300);

3.九个参数 第一个参数是绘制的图片对象
二三个参数是在图片上截取的位置
四五个参数是图片截取的大小
六七个参数是在画布上的起始点坐标
八九个参数是画布上绘制的图片大小
context.drawImage(image,50,50,100,100,200,0,400,600);

}
给图片路径赋值
image.src = ‘img/1.png’;

绘制一个圆
context.arc(100,100,100,0,2*Math.PI,false);

// 截取图片
context.clip();