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();//以指定的粗细和颜色描绘路径。前面的只是有了路径，必须用stroke方法进行描绘，否则看不到任何效果

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

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

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

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

8、画曲线

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

9、裁剪

//加载图片

var image=new Image();
image.src='../images/Penguins.jpg';

image.οnlοad=function(){

context.beginPath();

//画裁剪区域，此处以圆为例

context.arc(50,50,50,0,2*Math.PI);
context.clip();//次方法下面的部分为待剪切区域，上面的部分为剪切区域

context.drawImage(image,0,0,100,100);

}

注意：

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.οnlοad=function(){

var image=new Image();

image.src='../images/Penguins.jpg';

image.οnlοad=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>最终效果图：

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

转载于:https://www.cnblogs.com/porter/p/10900597.html

html5 canvas 自定义画图裁剪图片相关推荐

HTML5 Canvas 自定义笔刷
1. [图片] QQ截图20120715095110.png 2. [代码][HTML]代码 <!DOCTYPE html> <html lang="en" ...
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
android 自定义图片裁剪,android 自定义比例裁剪图片(拍照相册)方式自定义比例...
先说下我这个有啥好处主要是能够自定义设置裁剪图片的比例.比如 :今天产品给你说裁剪成16:9 的图片. 你做好了 OK 明天产品又和你说裁剪成10:7 的图片 ,你是不是要吐血, 我这里只要 ...
html canvas php,HTML5 canvas实现画图程序（附代码）
这篇文章给大家介绍的内容是关于HTML5 canvas实现画图程序(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 项目简介整个项目分为两大部分场景场景负责canvas控 ...
html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
html制作windows桌面,用html5 canvas制作Windows7桌面图片
手把手教你用html5制作canvas制作Windows7桌面图片,看起来好高大上哈.这里主要是要突出制作一张Windows7桌面图片使用的工具很简单,也不是真正的手把手,因为这方面实在不是强项.用n ...
用html5 canvas画猪头,使用HTML5 Canvas实现画图效果
使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 效果演示您的浏览器不支持canvas! ...
html5 canvas 制作画图工具。
html5比起之前最大的进步之一,就是引入了canvas标签.canvas 顾名思义,是个画布,我们可以通过脚本语言(javascript),来操作canvas,画出各种各样的图案. 既然是画布,那就 ...

html5 canvas 自定义画图裁剪图片

html5 canvas 自定义画图裁剪图片相关推荐

最新文章

热门文章