Javascript 我如何用图像填充？

通常，您可以使用

ctx.fillStyle=“此处的任何颜色”

填充画布中的矩形，然后使用

ctx.fillRect（此处的跳线、长度和宽度）

。是否有语法可以说

ctx.fillRect（someImagePathHere、xOfTopLeft、yofTopLeft）

---

如果没有，我如何才能实现这一点？

以下是一些可能性的示例：

var im = new Image();
im.src = "https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg";
im.onload = function () { /* first, wait until the image is loaded */
    /* create five canvases, and draw something in each */
    for (var i=1; i<=5; i++) {
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.width = canvas.height = 200;
    var ctx=canvas.getContext("2d");
    var x=50, y=50; /* where to plot */
    var w=20, h=60; /* width and height of rectangle, if applicable */
    switch (i) {
    case 1:
        /* first canvas: draw a rectangle */
        ctx.fillRect(x, y, w, h);
        break;
    case 2:
        /* second canvas: draw an image, actual size, no clipping */
        /* coordinates are where the top left of the image is plotted */
        ctx.drawImage(im, x, y);
        break;
    case 3:
        /* third canvas: draw an image, scaled to rectangle */
        ctx.drawImage(im, x, y, w, h);
        break;
    case 4:
        /* fourth canvas: draw an image, actual size, clipped to rectangle */
        ctx.save();
        ctx.rect(x, y, w, h);
        ctx.clip();
        ctx.drawImage(im, x, y);
        ctx.restore();
        break;
    case 5:
        /* fifth canvas: draw shapes filled with a background image */
        ctx.fillStyle = ctx.createPattern(im, 'repeat'); /* or 'no-repeat', or 'repeat-x', or 'repeat-y' */
        /* note that the image is tiled from the top left of the canvas */
        ctx.fillRect(x, y, w, h);

        /* also draw a circle, why not */
        ctx.beginPath();
        ctx.arc(150, 150, 40, 0, Math.PI*2);
        ctx.fill();
        break;
    }
    }
}
im.onerror = function() { alert("failed to load image"); };

var im=new Image（）；
im.src=”https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg";
im.onload=function（）{/*首先，等待映像加载*/
/*创建五张画布，并在每个画布上画一些东西*/
对于（var i=1；i这里有一个快速示例，说明如何使用
drawImage
将图像绘制到画布上。左侧的元素是图像，右侧的元素是绘制图像的画布

JSFiddle：


window.onload=function（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“图像”）；
ctx.drawImage（img，0,0）；
}
画布{
边框：1px实心#D3；
}
这个问题模棱两可，因为有很多方法可以“用图像填充”

浏览器中的第一批图像是异步下载的，因此您需要等待图像加载后才能使用它。对于画布情况，获取图像最常用的方法是创建新图像并设置一个
onload
侦听器

const img = new Image();
img.onload = someFunctionToCallWhenTheImageHasLoaded
img.src = 'http://url/to/image';

那么问题是“fillRect”是什么意思

使用此256x256图像


例如，要以下载的图像大小绘制图像，可以使用3个参数

ctx.drawImage(img, x, y);



const img=new Image（）；
img.onload=牵引；
img.src=https://i.imgur.com/ZKMnXce.png';
函数绘图（）{
const ctx=document.querySelector（'canvas'）.getContext（'2d'）；
ctx.drawImage（img，0,0）；
}
canvas{边框：1px纯黑；}
drawImage，带有适当的参数…？drawImage：不完全重复，但可能有用：语法是
drawImage（image，dx，dy）
，其中dx和dy是图像左上角画布上的坐标。
drawImage
还支持按比例绘制图像-请参阅此处的更多详细信息：此答案非常有教育意义，它帮助我比所选答案更好地理解问题。感谢您抽出时间键入所有这些内容!