购物车
登陆 / 注册
微信扫码登陆

推荐手册

HTML canvas createPattern() 方法

定义和用法

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

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

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

JavaScript 语法:

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

浏览器支持


Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createPattern() 方法。

注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。


参数值

参数描述
image规定要使用的模式的图片、画布或视频元素。 
repeat默认。该模式在水平和垂直方向重复。
repeat-x该模式只在水平方向重复。
repeat-y该模式只在垂直方向重复。


no-repeat该模式只显示一次(不重复)。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<body>
<p>图片应用:</p>
<img src="http://ss.0133.cn/upload/image/828/409/939/1553760584430599.jpg" id="lamp">
<p>画布:</p>
<button onclick="draw('repeat')">重复</button> 
<button onclick="draw('repeat-x')">重复-x</button> 
<button onclick="draw('repeat-y')">重复-y</button> 
<button onclick="draw('no-repeat')">不重复</button>     
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
function draw(direction)
{
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.clearRect(0,0,c.width,c.height); 
	var img=document.getElementById("lamp")
	var pat=ctx.createPattern(img,direction);
	ctx.rect(0,0,220,128);
	ctx.fillStyle=pat;
	ctx.fill();
}
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号