HTML5 canvas平铺的代码详解(2)-木庄网络博客

2022-04-02 19:58:26 PHP中文网 JavaScript 百度已收录

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var pat = ctx.createPattern(img,"repeat");
    ctx.rect(0,0,200,200);
    ctx.fillStyle = pat;
    ctx.fill();
}

GOOD！
再来重申下createPattern定义

createPattern() 方法在指定的方向内重复指定的元素。
元素可以是图片、视频，或者其他 <canvas> 元素。
被重复的元素可用于绘制/填充矩形、圆形或线条等等。

JavaScript 语法：

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

参数描述


repeat	默认。规定要使用的图片、画布或视频元素。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

以上就是HTML5 canvas平铺的代码详解的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

详细介绍HTML5的article和section的区别

HTML5规定元素的上下文菜单属性contextmenu

如何使用HTML5 canvas绘制线条

HTML5中localstorage本地存储的示例