Canvas 图片平铺设置

/**
 * 图片平铺
 */
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);
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 图片绕边旋转的小动画

    /** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getEleme...

    就只是小茗
  • <script>元素在XHTML中的用法

      编写XHTML代码的规则要比编写HTML严格得多,例如如下代码: 1 <script type="text/javascript"> 2 fun...

    就只是小茗
  • CSS深入理解学习笔记之z-index

    1、z-index基础   z-index含义:指定了元素及其子元素的”z顺序“,而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。   z-i...

    就只是小茗
  • 前沿 | 历时十二年!曼彻斯特百万级神经元的类脑超算终开启

    具有百万处理器内核的「脉冲神经网络架构」或 SpiNNaker,每秒能完成约 200 兆次运算。

    机器之心
  • Java开发 菜单栏

    用户2965768
  • 全球最大规模神经形态超级计算机正式开机

    受欧盟人脑计划支持的目前全球最大规模的神经形态超级计算机于2018年11月2日正式开机。

    人工智能快报
  • Mybatis 动态 SQL

    Mybatis 动态SQL,通过 ●if ●choose (when, otherwise) ●trim (where, set) ●foreach ...

    赵哥窟
  • Mybatis 文档(二)

    这条语句提供了一种可选的查找文本功能。如果没有传入“title”,那么所有处于“ACTIVE”状态的BLOG都会返回;反之若传入了“title”,那么就会对“t...

    Remember_Ray
  • 第66天:闭包的原理和函数传参

    在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型...

    半指温柔乐
  • 【STM32F429开发板用户手册】第28章 STM32F429的系统bootloader基础知识

    最新教程下载:http://www.armbbs.cn/forum.php?mod=viewthread&tid=93255

    armfly

扫码关注云+社区

领取腾讯云代金券