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>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
随机推荐
- vue-d2admin-axios异步请求登录，先对比一下Jquery ajax, Axios, Fetch区别
先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...
- CF1213F Unstable String Sort(差分)
其实全部可以为同一种字符串,但题目要求\(k\)种,我们考虑开始尽可能不同,最后再取\(min\) 考虑\(A\),全部不同:再做\(B\),\(S[b_{i-1}]\le S[b_{i}]\)如果开 ...
- SpringCloud：Ribbon负载均衡
1.概述 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡的工具. 简单的说,Ribbon是Netflix发布的开源项目,主要功能是提供客 ...
- CodeForeces 842d Vitya and Strange Lesson ——（带lazy标记的01字典树）
给一个序列,每次操作对这个序列中的所有数异或一个x,问每次操作完以后整个序列的mex值. 做法是去重后构建01字典树,异或x就是对root加一个x的lazy标志,每次pushDown时如果lazy的这 ...
- Educational Codeforces Round 64（ECR64）
Educational Codeforces Round 64 CodeForces 1156A 题意:1代表圆,2代表正三角形,3代表正方形.给一个只含1,2,3的数列a,ai+1内接在ai内,求总 ...
- css自定义属性和简单效果
简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命. 之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 兼容 ...
- Mybatis异常-java.lang.IllegalArgumentException: invalid comparison:java.util.Date and java.lang.String
原因:在Mapper.xml中对非字符串类型的数据进行了是否为空判断,如date类型的数据Create_Date != '',decimal类型的数据price != ''都会报这个错误 只有字符串才 ...
- --nodejs详细安装步骤
什么是nodejs? 脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言,浏览器是它的解析器角色.而对于需要独立运行的JS,node ...
- git clone速度太慢的解决办法
最近发现使用git clone的速度比较慢,于是找到了办法分享给大家: 思路: git clone特别慢是因为github.global.ssl.fastly.net域名被限制了. 只要找到这个域名对 ...
- cmake 手册详解【转】
https://www.cnblogs.com/coderfenghc/tag/cmake/ CMake 手册详解(二十三) SirDigit 2012-12-16 22:03 阅读:11058 ...