Rumah > Artikel > hujung hadapan web > html5的应用-图像裁剪效果图
html5的应用-图像裁剪效果图
- 零下一度asal
- 2017-04-27 15:25:071717semak imbas
图像用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>Atas ialah kandungan terperinci html5的应用-图像裁剪效果图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html5的应用-画一个可爱的小猫咪效果图Artikel seterusnya：分享一个HTML5电子杂志翻书特效代码