html5 canvas 自定义画图裁剪图片

时间:2023-02-09 09:11:26

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


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

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


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


html5 canvas 自定义画图裁剪图片



下面我们先介绍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方法进行描绘,否则看不到任何效果

html5 canvas 自定义画图裁剪图片

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();//开始填充 

html5 canvas 自定义画图裁剪图片

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();

  html5 canvas 自定义画图裁剪图片

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();

       html5 canvas 自定义画图裁剪图片

     眼尖的小伙伴们应该注意到了,四个拐角是圆的,对的,就是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(); 

            html5 canvas 自定义画图裁剪图片


8、画曲线

     context.beginPath();
     context.moveTo(100,600);
     context.quadraticCurveTo(150,650,100,700);//(150,600)为控制点,(100,700)为曲线终点。可以指定多个控制点,能更精确的控制曲线的走向
     context.stroke();

                         html5 canvas 自定义画图裁剪图片

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);

}

        html5 canvas 自定义画图裁剪图片

     


注意:

        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>最终效果图:

html5 canvas 自定义画图裁剪图片

当初为实现这个效果,因为刚接触canvas,找了很多资料,网上很多都是介绍规则图形裁剪例子,没有不规则的,最终实现时,万分激动啊,终于可以在聊天发图片时有微信上的的感觉。