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 自定义画图裁剪图片的更多相关文章

  1. HTML5 Canvas 自定义笔刷

    1. [图片] QQ截图20120715095110.png ​​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" & ...

  2. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  3. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  4. Html5 Canvas 实现滚动的图片

    今天一直在找html5 canvas的使用实例.想画一张地图,再画个小车在上面跑.运气好找到了一个大神写的js代码.该代码实现了图片的左右来回滚动,现在粘贴在博客里记录一下: <html> ...

  5. HTML5 本地裁剪图片并上传至服务器(转)

    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

  6. HTML5裁剪图片并上传至服务器实现原理讲解

    HTML5裁剪图片并上传至服务器实现原理讲解   经常做项目需要本地上传图片裁剪并上传服务器,比如会议头像等功能,但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁 ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  9. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

随机推荐

  1. GoCN每日新闻(2019-09-24)

    1. Go 搭建的高效网页爬虫:https://creekorful.me/building-fast-modern-web-crawler/ 2. Go 时区处理:https://medium.co ...

  2. nodejs新工具-cypress和testcofe的崛起

    今天咨询一个自动化 工具问题,偶然间有人提起了这个可能以后会很火的工具,在此找到一篇很好的参考文章 记录并为以后做准备 cypress和testcofe https://www.jianshu.com ...

  3. Android中为何使用Log而不用System.out

    Android中为何使用Log而不用System.out System.out除了使用方便一点以外有以下缺点:日志不可控制,打印时间无法确定,不能添加过滤器,日志没有级别之分. 使用Log比如想打印一 ...

  4. Git的使用(3) —— 远程版本库的操作(GitHub)

    1. 配置SSH (1) GitHub 登陆GitHub后,点击右上角头像,选择 Setting . 在左面栏目中选择"SSH and GPG keys". 打开生成的SSH公钥文 ...

  5. php手记之08-tp5中间件

    01-创建中间件 php think make:middleware 中间件的名称 这个指令会 application/http/middleware目录下面生成一个中间件文件. 02-注册中间件三种 ...

  6. TextBox光标定位到文本末尾

    private void RichTextBox1_TextChanged(object sender, EventArgs e) { this.richTextBox1.Select(richTex ...

  7. Java ArrayList,LinkedList使用

    1.ArrayList底层采用数组实现,当使用不带参数的构造方法生成ArrayList对象时,实际上回在底层生成一个长度为10的Object类型数组. 2.如果增加的元素个数超过10个,那么Array ...

  8. excel自增编号

    1.首先在单元格 A2:C2 中输入数据. 2.选择 A3:A500, 我们按键盘的 CTRL G 键, 拉起定位框, 然后在参考位置, 输入 A3:A500, 然后单击 "确定" ...

  9. web常用服务架构

    架构风格就是一种项目的设计模式.常见的架构风格有基于客户端与服务端的.基于组件模型的(EJB).分层架构(MVC).面向服务架构(SOA)等. 一.单体架构 单体架构也称为单体系统或单体应用,就是一种 ...

  10. Flutter -------- dio网络请求

    dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API.FormData.拦截器.请求取消.Cookie管理.文件上传/下载.超时等... 1.添加依赖# d ...