【HTML5】图像裁剪

来源：互联网发布：php技术有哪些编辑：程序博客网时间：2024/05/17 05:02
<!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>
0 0