画布矩形图像

Canvas rectangle image

本文关键字：图像 布矩形      更新时间：2023-09-26

所以我开始使用画布，我有一个问题，习惯图层和他们的填充。

几个小时后，我设法使用基本颜色制作简单的动画，但主要问题是当我想填充框数组

var boxes = [];
boxes.push({
    x: 50,
    y: 200,
    width: 100,
    height: 100
});

包含坐标和参数与模式。

var pat = ctx.createPattern(ground_block_200_80,'repeat');

使用

从box数组中创建一个矩形
    ctx.fillStyle = pat;
    ctx.fillRect(boxes[0].x, boxes[0].y, boxes[0].width, boxes[0].height);

它从X = 0和Y = 0开始填充整个图层但我想从矩形的左上角开始图案

是否有可能以某种方式移动图层或调整图案?

目前还没有一种普遍的方法来将模式调整到特定的偏移量。标准中定义了一个setTransform方法，但支持非常少。

您最好的选择可能是不使用模式，而依赖于drawImage()。

注意: 你可以在你的矩形的"左上角"区域使用一个模式，并在底部使用drawImage &如果模式在每个框内重复多次，则使用正确的边框以提高效率，但这将是一个复杂且容易出错的代码。

相关文章：