IT序号网

HTML5中createPattern()知识解答

shasha 2021年05月25日 编程语言 206 0

定义和用法

createPattern() 方法在指定的方向内重复指定的元素。

元素可以是图片、视频,或者其他 <canvas> 元素。

被重复的元素可用于绘制/填充矩形、圆形或线条等等。

JavaScript 语法:

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 

参数值

参数 描述
image 规定要使用的图片、画布或视频元素。
repeat 默认。该模式在水平和垂直方向重复。
repeat-x 该模式只在水平方向重复。
repeat-y 该模式只在垂直方向重复。
no-repeat 该模式只显示一次(不重复)。
        var c = document.getElementById('myCanvas'); 
        var ctx = c.getContext("2d");//获取上下文2d环境 
 
        var img = new Image(); 
        img.src = "lamp.gif"; 
        img.onload = function(){//等到图片加载进来之后 
            var pat = ctx.createPattern(img,"repeat"); 
            ctx.fillStyle=pat; 
            ctx.fillRect(10,10,200,200); 
        }


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

实现多个标签页之间通信的几种方法(sharedworker)知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。