本文实例为大家分享了画布图像布局填充的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; title>画布——图像布局填充& lt;/title>
& lt; style>
#帆布{
边界:1 px固体浅紫红;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;帆布id=盎肌笨矶?" 600 px高度=?00 px”比;
& lt;/canvas>
& lt; script>//获取到画布元素
画布var=. getelementbyid(“画布”);//获取画布中的画图环境
var=canvas.getContext上下文(2 d);//创建形象对象
var img=新形象();//警报(img);//引入图片URL
img。src=" https://www.yisu.com/zixun/image/huiji.png ";
窗口。onload=function () {//创建填充规则.createPattern(图像对象,“规则的);第二参数:重复,没有重演,repeat-x, repeat-y;
var=context.createPattern模式(img,“没有重演”);//设置填充属性
上下文。fillStyle=模式;
context.fillRect (10 10 canvas.width canvas.height);
}
& lt;/script>
& lt;/body>
& lt;/html>之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
