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.onload=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.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>最终效果图：
当初为实现这个效果，因为刚接触canvas，找了很多资料，网上很多都是介绍规则图形裁剪例子，没有不规则的，最终实现时，万分激动啊，终于可以在聊天发图片时有微信上的的感觉。
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绘制对象中添加自定义的函数功能演示,如何 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- Html5 Canvas 实现滚动的图片
今天一直在找html5 canvas的使用实例.想画一张地图,再画个小车在上面跑.运气好找到了一个大神写的js代码.该代码实现了图片的左右来回滚动,现在粘贴在博客里记录一下: <html> ...
- HTML5 本地裁剪图片并上传至服务器（转）
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- HTML5裁剪图片并上传至服务器实现原理讲解
HTML5裁剪图片并上传至服务器实现原理讲解 经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 玩转html5<canvas>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
随机推荐
- namenode 性能优化 RPC队列拆分
一.Service RPC port NameNode默认使用8020端口侦听所有的RPC请求(HDP版本),包括客户端数据请求,DataNode心跳和block上报,ZKFC模块监控检查和切换控制. ...
- 【CSP模拟赛】Adore（状压dp 二进制）
题目描述 小w偶然间见到了一个DAG.这个DAG有m层,第一层只有一个源点,最后一层只有一个汇点,剩下的每一层都有k个节点.现在小w每次可以取反第i(1<i<n-1)层和第i+1层之间的连 ...
- ubuntu16.04和ubuntu18.04安装dlib
- # for macOS brew install cmake brew install boost brew install boost-python --with-python3 # for U ...
- Nessus更新到8.5.0
Nessus更新到8.5.0 此次更新,主要涉及以下变化: (1)Nessus的用户注册和激活流程进行简化.用户可以在Nessus软件中直接进行注册和激活. (2)Nessus报告生成功能得到加强 ...
- Dart中的mixins
/* mixins的中文意思是混入,就是在类中混入其他功能. 在Dart中可以使用mixins实现类似多继承的功能,with关键字 因为mixins使用的条件,随着Dart版本一直在变,这里讲的是Da ...
- shell编程系列26--大型脚本工具开发实战
shell编程系列26--大型脚本工具开发实战 大型脚本工具开发实战 拆分脚本功能,抽象函数 .function get_all_group 返回进程组列表字符串 .function get_all_ ...
- 安装好oracle后如何使用PLSQL连接【我】
简单的说: 一.如果你本地安装的是32位的Oracle,可以直接在PLSQl中配置oracle安装路径下的相关目录文件,直接启动PLSQL 二.如果你本地安装的是64位的Oracle或者oracle服 ...
- Spring5源码分析之AnnotationConfigApplicationContext
前言: 主要了解的内容有如下几点: @Qualifier与@Primary注解的使用 Spring中ApplicationContext的作用 BeanFactory与ApplicationConte ...
- 算法习题---5.8Unix ls命令（Uva400）
一:题目 输入正整数n以及n个文件名,将这n个文件名按照ASCII优先升序排列,按列优先方式左对齐输出. 注意:文件名最长的为M,那么最右列字符串长度为M,其他列的长度为M+2 注意:一列最多允许出现 ...
- 宣化上人：大佛顶首楞严经四种清净明诲浅释(10-11） -------------------------------------------------------------------------------- (转自学佛网：http://www.xuefo.net/nr/article23/230920.html)
大佛顶首楞严经四种清净明诲浅释(10) 唐天竺·沙门般剌密帝译 宣化上人主讲 一九八三年四月十七日晚讲于万佛圣城 是故阿难.若不断偷修禅定者.譬如有人.水灌漏卮.欲求其满.纵经尘劫.终无平复. 是故阿 ...