Question

有人可以看看这个。我已经尝试了一切，但我似乎无法重复这种模式。在画布上我只能在画布上绘制一个，但这就是全部。有人可以帮忙吗。

谢谢。

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;

var imgSprite = new Image();
imgSprite.src = 'images/sprite.png';

function drawBg () {
var grassSrcX = 0;
var grassSrcY = 0;
var grassWidth = 74;
var grassHeight = 10;
var drawGrassOnCanvasX = 0;
var drawGrassOnCanvasY = 215;

ctxBg.drawImage(imgSprite,grassSrcX,grassSrcY,grassWidth,grassHeight,drawGrassOnCanvasX,drawGrassOnCanvasY,grassWidth,grassHeight);

var pattern = ctxBg.createPattern(canvasBg, 'repeat-x');
ctxBg.fillStyle = pattern;
ctxBg.fillRect(drawGrassOnCanvasX, drawGrassOnCanvasY, gameWidth, gameHeight);
}

Answer 1

您将画布对象作为可重复图像传递给模式，您应该将其更改为您想要重复的图像（在这种情况下我假设是草）。

Answer 2

所以我经过很多努力之后自己解决了这个问题，而且比我想象的要简单得多。

在绘制在HTML文件上创建的画布之前，在javascript文件内或<script>标记内创建另一个画布。

var canvasPattern = document.createElement("canvas");

确保它有一个不同的元素ID，提示("canvas")而不是我使用的旧元素，即我的HTML文件(canvasBg)中的ID。

给它宽度和高度

canvasPattern.width = 74;
canvasPattern.height = 10;

现在为此画布创建一个上下文变量以绘制2d形状

var ctxPattern = canvasPattern.getContext("2d");

现在确保将用作要在新创建的画布中绘制的图案的图像。

ctxPattern.drawImage(imgSprite,grassSrcX,grassSrcY,grassWidth,grassHeight,drawGrassOnCanvasX,drawGrassOnCanvasY,grassWidth,grassHeight);

最后在你的旧画布上绘制你的模式（在你的html文件上创建的那个）并让模式重复。

var pattern = ctxBg.createPattern(canvasPattern, 'repeat-x');
ctxBg.fillStyle = pattern;
ctxBg.fillRect(0, 0, 800, 500);

这是完整的脚本，希望这可以帮助：）

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;

var imgSprite = new Image();
imgSprite.src = 'images/sprite.png';

function drawBg () {

var canvasPattern = document.createElement("canvas");
canvasPattern.width = 74;
canvasPattern.height = 10;
var ctxPattern = canvasPattern.getContext("2d");

var grassSrcX = 0;
var grassSrcY = 0;
var grassWidth = 74;
var grassHeight = 10;
var drawGrassOnCanvasX = 0;
var drawGrassOnCanvasY = 215;

ctxPattern.drawImage(imgSprite,grassSrcX,grassSrcY,grassWidth,grassHeight,drawGrassOnCanvasX,drawGrassOnCanvasY,grassWidth,grassHeight);

var pattern = ctxBg.createPattern(canvasPattern, 'repeat-x');
ctxBg.fillStyle = pattern;
ctxBg.fillRect(0, 0, gameWidth, gameHeight);
}

ctx.createPattern不起作用

2 个答案: