<!DOCTYPE html>
<html>
<title>图像的裁剪</title>
<body>
<canvas id="myCanvas" width="800px" height="600px"style="border:1px solid #131313"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(240, 0);
ctx.lineTo(400, 110);
ctx.lineTo(560, 0);
ctx.lineTo(500, 200);
ctx.lineTo(640, 310);
ctx.lineTo(450, 310);
ctx.lineTo(400, 500);
ctx.lineTo(350, 310);
ctx.lineTo(140, 310);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.clip();
var img = new Image();
img.src = "tu.webp",width="800px",height="600px";
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
</script>
</html>
本文介绍了如何利用HTML5的canvas元素结合JavaScript，通过定义路径并设置clip区域，实现对图像进行裁剪，并在裁剪区域内绘制图片的过程。
扫一扫
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
