html5的应用-图像裁剪效果图
发布时间：2020-07-24 编辑：jiaochengji.com
教程集为您提供html5的应用-图像裁剪效果图等资源，欢迎您收藏本站，我们将为您提供最新的html5的应用-图像裁剪效果图资源
图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲
效果截图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<script>
// 图像裁剪：context.clip()
// context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候
// 先创建裁剪区域
// 再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲）
// 给出圆形和星形的裁剪代码
function createCircleClip(context) {
context.beginPath();
context.arc(200, 170, 100, 0, Math.PI * 2, true);
context.closePath();
context.clip();
}
function create5StarClip(context) {
var n = 0;
var dx = 200;
var dy = 150;
var s = 150;
context.beginPath();
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i ) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx x * s, dy y * s);
}
context.closePath();
context.clip();
}
function draw() {
var canvas = document.getElementById("mycanvas");
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, 400, 300);
image = new Image();
image.src = "Image/html5.jpg"
image.onload = function () {
//圆形裁剪区
//createCircleClip(context)
//星形裁剪区
create5StarClip(context);
context.drawImage(image,0,0);
}
}
window.onload=draw;
</script>
</head>
<body>
<p id="p1"></p>
<canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas>
</body>
</html>以上就是html5的应用-图像裁剪效果图的详细内容，更多请关注教程集其它相关文章！
-->您可能感兴趣的文章：
html5的应用-图像裁剪效果图
jQuery图片裁剪插件 Jcrop
使用HTML5 Canvas API中的clip()方法裁剪区域图像
html5 canvas和JavaScript如何实现本地截图
php gd库实现服务端图片裁剪与缩略图
美图秀秀使用裁剪改变构图分享
jQuery图片剪裁插件 Jcrop
php图片裁剪与缩略图示例
美图秀秀怎么剪裁图片 剪裁图片方法分享
零基础学习HTML5
[关闭]