html5 canvas 自定义画图裁剪图片

依木食品商场 發表於 2019-5-21 16:29:00

html5 给我们带来了极大惊喜的canvas标签，有了它我们可以在浏览器客户端处理图片，不需要经过服务器周转。可以实现：
 
1、照片本地处理，ps有的一些基本功能都有
2、结合js可以实现一些很炫的动画效果
 
这篇文章实现一个微信上发图片消息的效果最终效果图：
 <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163236733-175153616.png" alt="">
 
 
 
 
下面我们先介绍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();//以指定的粗细和颜色描绘路径。前面的只是有了路径，必须用stroke方法进行描绘，否则看不到任何效果
 <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163317119-58782521.png" alt="">
 
4、画实心三角形
     context.beginPath();
     context.moveTo(100,110);
     context.lineTo(100,210);
     context.lienTo(150,210);
     //context.lineTo(100,110);//这句要不要都无所谓，因为后面的fill方法自动会将路径闭合
     context.fillStyle=‘green’;//填充颜色
     context.fill();//开始填充 
 <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163326847-1887728060.png" alt="">
 
5、画空心三角形（直线加斜线组合）
      context.beiginPath();
      context.moveTo(100,220);
      context.lineTo(100,320);
      context.lineTo(150,320);
      context.closePath();//关闭路径 ,用context.lineTo(100,220)继续画完也可以
      context.lineWidth=3;
      context.stroke();
 <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163339903-40902387.png" alt="">
 
6、画正方形（直线加斜线组合）
      context.beginPath();       context.moveTo(100,330);       context.lineJoin='round';       context.lineTo(100,430);       context.lineTo(200,430);       context.lineTo(200,330);       context.closePath();       context.lineWidth=10;       context.strokeStyle='blue';       context.stroke();
      <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163349585-1433454683.png" alt="">
 
     眼尖的小伙伴们应该注意到了，四个拐角是圆的，对的，就是context.lineJoin='round'的功劳，除了round还有bevel（斜角）和miter（尖角），默认miter
7、画圆
      context.beginPath();       context.arc(150500,50,0,2*Math.PI);       context.lineWidth=2;       context.strokeStyle='orange';       context.stroke();  
           <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163402256-1705359137.png" alt="">
 
 
8、画曲线
     context.beginPath();      context.moveTo(100,600);      context.quadraticCurveTo(150,650,100,700);//(150,600)为控制点，(100,700)为曲线终点。可以指定多个控制点，能更精确的控制曲线的走向      context.stroke();                         <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163411032-951225154.png" alt="">
 
9、裁剪
      //加载图片
      var image=new Image();       image.src='../images/Penguins.jpg';
     image.onload=function(){
      context.beginPath();
       //画裁剪区域，此处以圆为例
       context.arc(50,50,50,0,2*Math.PI);        context.clip();//次方法下面的部分为待剪切区域，上面的部分为剪切区域
       context.drawImage(image,0,0,100,100);
}
        
     <img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163439922-562700909.png" alt="">
 
 
注意：
        1、stroke()方法比较耗性能，如果描绘的样式一样的话建议放在最后执行
        2、用slip方法画裁剪区域过程中不能出现moveTo提笔的操作，否则无法形成完整的区域,剪切的效果大家可以试试。
 看完以上例子是不是对我们最终要实现的效果有清晰的思路了。
4条直接+4个圆角+2条斜线就可实现。直线和斜线好画，关键在于圆角，有人说直接用lineJoin不就搞定了吗，大家要清楚，lineJoin画出来的圆角角度大小是根据lineWidth确定的，要达到我们要实现的圆角角度，上面画正方形的圆角lineWidth=10,可我们的图片边框要这么粗？显然不符合要求，且难以控制圆角角度。最佳的办法就是用quadraticCurveTo画曲线替换，关键在于确定曲线的三个点：起点，控制点和终点，下面是完整的代码：
 
<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>       <script type="text/javascript">
                window.onload=function(){
                var image=new Image();
                image.src='../images/Penguins.jpg';   
                image.onload=function(){
                var canvas=document.createElement('canvas');
                canvas.width=106;
                canvas.height=100;
                context=canvas.getContext('2d');
                context.moveTo(0, 6);                 context.lineTo(0, 100-6);                 context.quadraticCurveTo(0, 100, 6, 100);                 context.lineTo(100-6, 100);                 context.quadraticCurveTo(100, 100, 100, 100-6);                 context.lineTo(100,27);                 context.lineTo(100+5,22);                 context.lineTo(100,17);                 context.lineTo(100, 6);                 context.quadraticCurveTo(100, 0, 100-6, 0);                 context.lineTo(6, 0);                 context.quadraticCurveTo(0, 0, 0, 6);                 context.lineWidth=0.5;                 context.stroke();
                context.clip();
                context.drawImage(image,0,0,106,100);
                document.body.appendChild(canvas);
                }
}     </script> </head> <body style="margin:0px;padding:0px;"> </body> </html>最终效果图：
<img src="https://img2018.cnblogs.com/blog/115923/201905/115923-20190521163455823-622059695.png" alt="">
 
 当初为实现这个效果，因为刚接触canvas，找了很多资料，网上很多都是介绍规则图形裁剪例子，没有不规则的，最终实现时，万分激动啊，终于可以在聊天发图片时有微信上的的感觉。 
  
来源：https://www.cnblogs.com/porter/p/10900597.html

頁: [1]

琼殿技术论坛's Archiver

html5 canvas 自定义画图裁剪图片