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>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
随机推荐
- Python字符串转十六进制进制互转
def str_to_hex(s): return ' '.join([hex(ord(c)).replace('0x', '') for c in s]) def hex_to_str(s): ) ...
- MySQL数据库入门——多实例配置
前面介绍了相关的基础命令操作,所有的操作都是基于单实例的,mysql多实例在实际生产环境也是非常实用的,因为必须要掌握 1.什么是多实例 多实例就是一台服务器上开启多个不同的服务端口(默认3306), ...
- centos6安装vim插件youcompleteme问题及解决
首先clone vim8代码库 git clone https://github.com/vim/vim.git 然后编译 注意下自己的python2.7config在哪儿 ./configure - ...
- 深度学习面试题12：LeNet(手写数字识别)
目录 神经网络的卷积.池化.拉伸 LeNet网络结构 LeNet在MNIST数据集上应用 参考资料 LeNet是卷积神经网络的祖师爷LeCun在1998年提出,用于解决手写数字识别的视觉任务.自那时起 ...
- LSTM和双向LSTM讲解及实践
LSTM和双向LSTM讲解及实践 目录 RNN的长期依赖问题LSTM原理讲解双向LSTM原理讲解Keras实现LSTM和双向LSTM 一.RNN的长期依赖问题 在上篇文章中介绍的循环神经网络RNN在训 ...
- Swagger 慢
Swagger 慢 - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=Swagger+%E6%85%A2 rest框 ...
- npm WARN deprecated fsevents windows
更新下 使用yarn貌似会帮助跳过这个问题: info fsevents@2.1.2: The platform "win32" is incompatible with this ...
- Python中__new__和__init__的区别与联系
__new__ 负责对象的创建而 __init__ 负责对象的初始化. __new__:创建对象时调用,会返回当前对象的一个实例 __init__:创建完对象后调用,对当前对象的一些实例初始化,无返回 ...
- shell编程系列14--文本处理三剑客之awk的概述及常用方法总结
shell编程系列14--文本处理三剑客之awk的概述及常用方法总结 awk是一个文本处理工具,通常用于处理数据并生成结果报告 awk的命名是它的创始人 Alfred Aho.Peter Weinbe ...
- GANomaly: Semi-Supervised Anomaly Detection via Adversarial Training-1-论文学习
通过对抗训练实现半监督的异常检测 Abstract 异常检测在计算机视觉中是一个经典的问题,即从异常中确定正常,但是由于其他类(即异常类)的样本数量不足,所以数据集主要基于一个类(即正常类).虽然该问 ...