这段是时间在学习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();
}
实际上并没有裁剪图片,而是裁剪了画布,图片按坐标绘制上去.
最终效果图