站長資訊網圖像用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>
