使用canvas實現圖形裁剪

時間 2019-11-24

標籤使用 canvas 實現圖形裁剪简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圖像</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			// 建立一個圓的路徑，裁剪
			context.beginPath();
			context.arc(150,150,150,0,Math.PI);
			context.closePath();
			// 裁切
			context.clip();
			// 繪製圖像
			// 1.建立圖像對象  img節點
			var img = new Image();
			img.src = '../4.jpg';
			img.onload = function(){
				// 建立平鋪對象
				// 參數：img節點，平鋪類型
				var pattern = context.createPattern(img,'repeat');
				// 使用
				context.fillStyle = pattern;
				context.fillRect(0,0,300,300);
			}
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="700px" height="400px"></canvas>
</body>
</html>

相關標籤/搜索