如何使用HTML5 Canvas API中的剪辑()方法裁剪区域图像 - 行业资讯

　　介绍

这篇文章主要介绍如何使用HTML5 Canvas API中的剪辑()方法裁剪区域图像,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

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

先来看看一个简单的演示。

& lt; ! DOCTYPE html>,,, 　　& lt; html lang=皕h"祝辞,,, 　　& lt; head>,,, 　　,,,& lt; meta charset=癠TF-8"祝辞,,, 　　,,,& lt; title>裁剪区域& lt;/title>,,, 　　,,,& lt; style>,,, 　　,,,,,,,body {,背景:url(“。/图片/bg3.jpg"),重复,,}, 　　,,,,,,,# canvas {,边界:1 px solid # aaaaaa;,显示:,块;,保证金:,50 px 汽车;,},,, 　　,,,& lt;/style>,,, 　　& lt;/head>,,, 　　& lt; body>,,, 　　& lt; p id=癱anvas-warp"祝辞,,, 　　,,,& lt; canvas id=癱anvas"祝辞,,, 　　,,,,,,,你的浏览器居然不支持画布? !赶快换一个吧! !,,, 　　,,,& lt;/canvas>,,, 　　& lt;/p>,,, 　　,, 　　& lt; script>,,, 　　,,,window.onload =,函数(){,, 　　,,,,,,,var canvas =, . getelementbyid (“canvas");,,, 　　,,,,,,,canvas.width =, 800,,,, 　　,,,,,,,canvas.height =, 600,,,, 　　,,,,,,,var context =, canvas.getContext (“2 d");,,, 　　,,,,,,,context.fillStyle =,“# FFF",,, 　　,,,,,,,context.fillRect (0, 0800600);,,, 　　,, 　　,,,,,,,//在屏幕上绘制一个大方块,,, 　　,,,,,,,context.fillStyle =,“black",,,, 　　,,,,,,,context.fillRect (10200200),,,, 　　,,,,,,,context.save (),,,, 　　,,,,,,,context.beginPath (),,,, 　　,, 　　,,,,,,,//裁剪画布从(0,0)点至(50,50)的正方形,,, 　　,,,,,,,context.rect (0 0 50,50);,,, 　　,,,,,,,context.clip (),,,, 　　,, 　　,,,,,,,//红色圆,,, 　　,,,,,,,context.beginPath (),,,, 　　,,,,,,,context.strokeStyle =,“red",,,, 　　,,,,,,,context.lineWidth =, 5,,,, 　　,,,,,,,context.arc (100100100 0 Math.PI *, 2, false),,,, 　　,,,,,,,//整圆,,, 　　,,,,,,,context.stroke (),,,, 　　,,,,,,,context.closePath (),,,, 　　,, 　　,,,,,,,context.restore (),,,, 　　,, 　　,,,,,,,//再次裁切整个画布,,, 　　,,,,,,,context.beginPath (),,,, 　　,,,,,,,context.rect (0, 0500500);,,, 　　,,,,,,,context.clip (),,,, 　　,, 　　,,,,,,,//绘制一个没有裁切的蓝线,,, 　　,,,,,,,context.beginPath (),,,, 　　,,,,,,,context.strokeStyle =,“blue",,,, 　　,,,,,,,context.lineWidth =, 5,,,, 　　,,,,,,,context.arc(100100年,50 0 Math.PI *, 2, false),,,, 　　,,,,,,,//整圆,,, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null