通常,您可以使用 ctx.fillStyle = "whatever color here"
在 Canvas 中填充矩形。然后 ctx.fillRect(cords and length and width here)
.有没有语法可以说 ctx.fillRect(someImagePathHere, xOfTopLeft, yofTopLeft)
如果没有,我还能如何实现这一目标?
最佳答案
这个问题是模棱两可的,因为有很多方法可以“用图像填充矩形”。
首先浏览器中的图像是异步下载的,因此您需要等待图像加载才能使用它。对于 Canvas 情况,获取图像的最常见方法是创建一个新的 Image
并设置一个 onload
听众
const img = new Image();
img.onload = someFunctionToCallWhenTheImageHasLoaded
img.src = 'http://url/to/image';
那么问题是“fillRect”是什么意思
使用这个 256x256 的图像
例如,要以下载的大小绘制图像,您可以使用
drawImage
有 3 个参数ctx.drawImage(img, x, y);
const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/ZKMnXce.png';
function draw() {
const ctx = document.querySelector('canvas').getContext('2d');
ctx.drawImage(img, 0, 0);
}
canvas { border: 1px solid black; }
<canvas></canvas>
要以不同的尺寸绘制图像,您可以使用
ctx.drawImage(img, x, y, width, height);
const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/ZKMnXce.png';
function draw() {
const ctx = document.querySelector('canvas').getContext('2d');
const destX = 10;
const destY = 20;
const destWidth = 30;
const destHeight = 40;
ctx.drawImage(img, destX, destY, destWidth, destHeight);
}
canvas { border: 1px solid black; }
<canvas></canvas>
要绘制图像的一部分,您可以使用
// part of image to draw
const srcX = 10;
const srcY = 20;
const srcWidth = 130;
const srcHeight = 140;
// where to draw it
const dstX = 60;
const dstY = 70;
const dstWidth = 160;
const dstHeight = 40;
ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight,
dstX, dstY, dstWidth, dstHeight);
const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/ZKMnXce.png';
function draw() {
const ctx = document.querySelector('canvas').getContext('2d');
// part of image to draw
const srcX = 10;
const srcY = 20;
const srcWidth = 130;
const srcHeight = 140;
// where to draw it
const dstX = 60;
const dstY = 70;
const dstWidth = 160;
const dstHeight = 40;
ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight,
dstX, dstY, dstWidth, dstHeight);
}
canvas { border: 1px solid black; }
<canvas></canvas>
也就是说,“fillRect”是不明确的,也许您想将图像用作图案,在这种情况下,您需要使用
createPattern
从中制作图案const pattern = ctx.createPatttern(img, 'repeat');
对于这些让我们使用这个 16x16 像素的图像
然后,您可以使用该模式作为您的 fillStyle
ctx.fillStyle = pattern;
ctx.fillRect(10, 20, 30, 40);
const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/fqgm8uh.png';
function draw() {
const ctx = document.querySelector('canvas').getContext('2d');
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(10, 20, 30, 40);
}
canvas { border: 1px solid black; }
<canvas></canvas>
图案与 Canvas 的原点有关,这意味着如果您只使用
ctx.fillRect
(或任何其他填充)模式将在填充之间匹配。ctx.fillRect(10, 20, 30, 40);
ctx.beginPath();
ctx.arc(50, 60, 25, 0, Math.PI * 2);
ctx.fill();
const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/fqgm8uh.png';
function draw() {
const ctx = document.querySelector('canvas').getContext('2d');
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(10, 20, 30, 40);
ctx.beginPath();
ctx.arc(50, 60, 25, 0, Math.PI * 2);
ctx.fill();
}
canvas { border: 1px solid black; }
<canvas></canvas>
因为图案固定在原点,如果您在不更改原点的情况下制作动画,您会注意到图案不会移动
const img = new Image();
img.onload = start;
img.src = 'https://i.imgur.com/fqgm8uh.png';
function start() {
const ctx = document.querySelector('canvas').getContext('2d');
const pattern = ctx.createPattern(img, 'repeat');
function render(time) {
time *= 0.001; // seconds;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const x = Math.sin(time * 1.1) * 150 + 150;
const y = Math.sin(time * 1.2) * 50 + 50;
ctx.fillStyle = pattern;
ctx.fillRect(x, y, 30, 40);
ctx.beginPath();
ctx.arc(x, y, 25, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
canvas { border: 1px solid black; }
<canvas></canvas>
为了移动图案,您需要使用
ctx.translate
移动 Canvas 的原点(以及 ctx.rotate
、 ctx.scale
、 ctx.setTransform
)const img = new Image();
img.onload = start;
img.src = 'https://i.imgur.com/fqgm8uh.png';
function start() {
const ctx = document.querySelector('canvas').getContext('2d');
const pattern = ctx.createPattern(img, 'repeat');
function render(time) {
time *= 0.001; // seconds;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const x = Math.sin(time * 1.1) * 150 + 150;
const y = Math.sin(time * 1.2) * 50 + 50;
ctx.translate(x, y);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 30, 40);
ctx.beginPath();
ctx.arc(0, 0, 25, 0, Math.PI * 2);
ctx.fill();
ctx.setTransform(1, 0, 0, 1, 0, 0); // set it back to the default
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
canvas { border: 1px solid black; }
<canvas></canvas>
关于javascript - 我将如何用图像填充矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31907295/