Canvas 剪切图片

最新推荐文章于 2024-04-12 17:06:18 发布

qq_45670012

最新推荐文章于 2024-04-12 17:06:18 发布

阅读量235

点赞数

分类专栏：前端文章标签： javascript html5 canvas

原文链接：https://www.mk2048.com/blog/blog.php?id=h02j1b01j0ib&title=Canvas+%E5%89%AA%E5%88%87%E5%9B%BE%E7%89%87

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

/**
 * 剪切图像
 */
function initDemo8(){
    var canvas = document.getElementById("demo8");
    if (!canvas) return;
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = "images/timg3.jpg";
    img.onload = function () {
        context.beginPath();
        context.moveTo(50, 50);
        context.lineTo(150, 50);
        context.lineTo(150, 150);
        context.lineTo(50, 150);
        context.lineTo(50, 50);
        context.closePath();
        context.clip();
        context.drawImage(img, 0, 0, 350, 350);
    };
}

更多专业前端知识，请上【猿2048】www.mk2048.com