站长资讯网图像用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>
