Canvas 图片平铺设置

最新推荐文章于 2022-06-24 14:00:00 发布

苘迷

最新推荐文章于 2022-06-24 14:00:00 发布

阅读量1k

点赞数

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

原文链接：https://www.mk2048.com/blog/blog.php?id=h02j1ccac12j&title=Canvas+%E5%9B%BE%E7%89%87%E5%B9%B3%E9%93%BA%E8%AE%BE%E7%BD%AE

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

/**
 * 图片平铺
 */
function initDemo7(){
    var canvas = document.getElementById("demo7");
    if (!canvas) return;
    var context = canvas.getContext("2d");
    var type = [
        "no-repeat", // 不平铺
        "repeat-x", // 横向平铺
        "repeat-y", // 纵向平铺
        "repeat" // 全画布平铺
    ];
    var index = 3;
    var img = new Image();
    img.src = "images/timg3.jpg";
    img.onload = function () {
        // 平铺方式
        context.fillStyle = context.createPattern(img, type[index]);
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}

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