使用HTML5 Canvas API中的clip()方法裁剪区域图像


Posted in HTML / CSS onMarch 25, 2016

使用Canvas绘制图像的时候,我们经常会想要只保留图像的一部分,这是我们可以使用canvas API再带的图像裁剪功能来实现这一想法。
Canvas API的图像裁剪功能是指,在画布内使用路径,只绘制该路径内所包含区域的图像,不会只路径外的图像。这有点像Flash中的图层遮罩。

使用图形上下文的不带参数的clip()方法来实现Canvas的图像裁剪功能。该方法使用路径来对Canvas话不设置一个裁剪区域。因此,必须先创建好路径。创建完整后,调用clip()方法来设置裁剪区域。
需要注意的是裁剪是对画布进行的,裁切后的画布不能恢复到原来的大小,也就是说画布是越切越小的,要想保证最后仍然能在canvas最初定义的大小下绘图需要注意save()和restore()。画布是先裁切完了再进行绘图。并不一定非要是图片,路径也可以放进去~

先来看看一个简单的Demo。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>裁剪区域</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //在屏幕上绘制一个大方块   
  28.         context.fillStyle = "black";   
  29.         context.fillRect(10,10,200,200);   
  30.         context.save();   
  31.         context.beginPath();   
  32.   
  33.         //裁剪画布从(0,0)点至(50,50)的正方形   
  34.         context.rect(0,0,50,50);   
  35.         context.clip();   
  36.   
  37.         //红色圆   
  38.         context.beginPath();   
  39.         context.strokeStyle = "red";   
  40.         context.lineWidth = 5;   
  41.         context.arc(100,100,100,0,Math.PI * 2,false);   
  42.         //整圆   
  43.         context.stroke();   
  44.         context.closePath();   
  45.   
  46.         context.restore();   
  47.   
  48.         //再次裁切整个画布   
  49.         context.beginPath();   
  50.         context.rect(0,0,500,500);   
  51.         context.clip();   
  52.   
  53.         //绘制一个没有裁切的蓝线   
  54.         context.beginPath();   
  55.         context.strokeStyle = "blue";   
  56.         context.lineWidth = 5;   
  57.         context.arc(100,100,50,0,Math.PI * 2,false);   
  58.         //整圆   
  59.         context.stroke();   
  60.         context.closePath();   
  61.     };   
  62. </script>   
  63. </body>   
  64. </html>  

运行结果:
使用HTML5 Canvas API中的clip()方法裁剪区域图像

混合使用save()和restore()方法,我们可以限定画画区域。首先我们可以使用rect()方法包围一个我们希望画画的区域,然后使用clip()方法把该区域裁剪下来。

这样以后我们不管在context中做了什么操作,只有限定的部分显示出来。也就是说clip()的作用是限定要显示的区域。当我们不希望继续限定区域了,可以使用restore()方法跳出来,继续操作原来的context。
再来看这样一个裁剪:
使用HTML5 Canvas API中的clip()方法裁剪区域图像

JavaScript Code复制内容到剪贴板
  1. function drawScreen() {   
  2.         var x = canvas.width / 2;   
  3.         var y = canvas.height / 2;   
  4.         var radius = 75;   
  5.         var offset = 50;   
  6.   
  7.         //裁剪的区域为 (x, y)为中心半径为75的圆   
  8.         context.save();   
  9.         context.beginPath();   
  10.         context.arc(x, y, radius, 0, 2 * Math.PI, false);   
  11.         context.clip();   
  12.   
  13.         // 先画一个蓝色的圆弧, 超过裁剪的部分不显示   
  14.         context.beginPath();   
  15.         context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);   
  16.         context.fillStyle = 'blue';   
  17.         context.fill();   
  18.   
  19.         // 画一个黄色的圆弧, 超过裁剪的部分不显示   
  20.         context.beginPath();   
  21.         context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);   
  22.         context.fillStyle = 'yellow';   
  23.         context.fill();   
  24.   
  25.         // 画一个红色的圆弧, 超过裁剪的部分不显示   
  26.         context.beginPath();   
  27.         context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);   
  28.         context.fillStyle = 'red';   
  29.         context.fill();   
  30.   
  31.         /*  
  32.          * restore()方法会返回到context原先的状态,在这里是clip()之前的状态。  
  33.          * 大家可以移除context.beginPath()方法,试试会发生什么。  
  34.          */  
  35.         context.restore();   
  36.         context.beginPath();   
  37.         context.arc(x, y, radius, 0, 2 * Math.PI, false);   
  38.         context.lineWidth = 10;   
  39.         context.strokeStyle = 'blue';   
  40.         context.stroke();   
  41.     }  

   
再次强调,一般使用裁剪功能的调用形式是

save();
clip();
restore();
这个顺序来进行调用。

HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 #HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 #HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 #HTML / CSS
HTML5打开本地app应用的方法
Mar 31 #HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 #HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 #HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 #HTML / CSS
You might like
PHP 类相关函数的使用详解
2013/05/10 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
jQuery中remove()方法用法实例
2014/12/25 Javascript
js动态切换图片的方法
2015/01/20 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
详解python中list的使用
2019/03/15 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python cumsum函数的具体使用
2019/07/29 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
女娲补天教学反思
2014/02/05 职场文书
好人好事事迹材料
2014/02/12 职场文书
贫困证明书范文
2015/06/16 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
python实现高效的遗传算法
2021/04/07 Python
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Python几种酷炫的进度条的方式
2022/04/11 Python