如何解决如何在HTML5 Canvas中更改图像重复图案
我正在尝试创建许多不同的图像重复图案。我将以下代码用于重复模式。该代码对于常规模式正常工作,但是 我需要许多不同的模式集,如下图所示。
或如下所示...
<div style="width: 675px;height:675px;overflow: hidden;"><canvas id="cc" width="300px" height="300px"></canvas></div>
<script>
drawPattern(img,current_size);
function drawPattern(img,size) {
var canvas = document.getElementById('cc');
var tempCanvas = document.createElement("canvas"),tCtx = tempCanvas.getContext("2d");
tempCanvas.width = size;
tempCanvas.height = size;
tCtx.drawImage(img,img.width,img.height,size,size);
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.clearRect(0,canvas.width,canvas.height);
ctx.fillStyle = ctx.createPattern(tempCanvas,'repeat');
ctx.beginPath();
ctx.rect(0,canvas.height);
ctx.fill();
}
</script>
请提供帮助,以帮助我了解不同的模式。预先感谢。
解决方法
我相信您可以完成无限的模式。因此,很难告诉您正在寻找的所有代码。您应该为自己研究很多技巧和“窃取”想法。
据我所见,您正在使用JavaScript来执行此模式,但是还有其他方法可以实现此目的。例如,您可以简单地使用HTML
和CSS
。喜欢:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("image.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>The background-repeat Property</h1>
<p>Here,the background image is repeated only vertically.</p>
</body>
</html>
此外,background-repeat
属性可以具有以下值:
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
最后,还有更多CSS
个属性可用于执行不同的背景图案,例如:
background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */
HTML
和CSS
文档:
https://www.w3schools.com/cssref/pr_background-repeat.asp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。