溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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中如何實現圖像裁剪”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
