HTML5Canvas裁剪图片

这段是时间在学习HTML5.学习到CanvasAPI..个人比较喜欢IOS系统中的圆形的设计

 便用html5裁剪了一个圆形的QQ头像.不多说了.上代码

function drawImageCropping(id)
{	
	//获取canvas
	var canvas=document.getElementById(id);
	if(canvas==null)
		return false;
	//获取(2d)上下文
	var context=canvas.getContext('2d');

	var image=new Image();
	image.οnlοad=function(){
		//绘制裁剪路径,
		create5StarClip(context);
		//将图片绘制在画布上
		context.drawImage(image,0,0,400,300);
	};
	//指定图片路径
	image.src="img/QQ图片20141209110602.jpg";
	
}

接下来是绘制裁剪路径的代码

function create5StarClip(context)
{
       //开始绘制路径
       context.beginPath();
       //将坐标原点位移
       context.translate(0,0);
       //绘制圆形   (圆心X轴坐标,圆心Y轴坐标,半径,开始角度,结束角度,是否是顺时针绘制)
	context.arc(200,150,150,0,Math.PI*2,true);
       //裁剪
       context.clip();
}

实际上并没有裁剪图片,而是裁剪了画布,图片按坐标绘制上去.

最终效果图