canva画图 图片居中裁剪_html5 canvas 自定义画图裁剪图片

html5 给我们带来了极大惊喜的canvas标签，有了它我们可以在浏览器客户端处理图片，不需要经过服务器周转。可以实现：

1、照片本地处理，ps有的一些基本功能都有

2、结合js可以实现一些很炫的动画效果

这篇文章实现一个微信上发图片消息的效果最终效果图：

下面我们先介绍canvas一些基本的用法，这里可能需要一些基本的几何知识，对小伙伴们来说应该不是问题

1、创建一个canvas

var canvas=document.createElement('canvas');或者获取一个已存在的canvas,var canvas=document.getElementById('canvasid');

canvas.width=1000;canvas.height=1000;//定义大小

2、创建绘图的上下文

var context=canvas.getContext('2d');

3、画直线

context.beiginPath();//开始画图

context.moveTo(100,50) ;//这个方法类似于我们写字时提笔动作，即把笔提起来，放到指定坐标处

context.lineTo(100,100);//由(100,50)处画到(100,100)处

context.lienWidth=2;//定义笔的粗细

context.strokeStyle='red';//定义笔的颜色

context.stroke();//以指定的粗细和颜色描绘路径。前面的只是有了路径，必须