HTML 参考手册

HTML 标签大全

HTML canvas clip() 方法

clip() 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。

在线示例

从画布截取200 * 120像素的矩形区域。然后，绘制一个红色矩形。仅红色矩形部分位于裁剪区域内：

示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　clip()方法使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<span>没有进行clip():</span>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
您的浏览器不支持　HTML5　canvas　标签。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
//　画一个矩形
ctx.rect(50,20,200,120);
ctx.stroke();
//　画一个红色矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
<span>有进行clip():</span>
<canvas　id="myCanvas2"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
您的浏览器不支持　HTML5　canvas　标签。</canvas>
<script>
var　c=document.getElementById("myCanvas2");
var　ctx=c.getContext("2d");
//剪切一个矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//剪切 후에 사각형을 그립니다
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>　
</body>
</html>

테스트 보기 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 및 Safari가 clip()를 지원합니다 메서드.

주의:Internet Explorer 8 과 이전 버전은 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

clip() 메서드는 원래 화면에서 어떤 형상과 크기의 영역을 잘라냅니다.

알림:하나의 영역을 잘라낸 후, 이후에 추가되는 모든 그래픽은 해당 잘라낸 영역에 제한됩니다(화면에 있는 다른 영역에 접근할 수 없습니다). 하지만, clip() 메서드를 사용하기 전에 save() 메서드를 사용하여 현재 화면 영역을 저장하고, 이후 언제든지(restore() 메서드를 사용하여) 원래 상태로 되돌릴 수 있습니다.

JavaScript 문법:	context.clip();

HTML canvas 참조 설명서

HTML: <template> 태그