使用canvas绘制图像实现平铺效果

最新推荐文章于 2024-07-12 19:06:42 发布

weixin_33936401

最新推荐文章于 2024-07-12 19:06:42 发布

阅读量959

点赞数

文章标签： python 移动开发

原文链接：https://my.oschina.net/u/3759656/blog/2247237

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图像</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			// 绘制图像
			// 1.创建图像对象  img节点
			var img = new Image();
			img.src = '../4.jpg';
			img.onload = function(){
				// 创建平铺对象
				// 参数：img节点，平铺类型
				var pattern = context.createPattern(img,'repeat');
				// 使用
				context.fillStyle = pattern;
				context.fillRect(0,0,300,300);
			}
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="700px" height="400px"></canvas>
</body>
</html>

转载于:https://my.oschina.net/u/3759656/blog/2247237