如何用图像填充图像？ [英] How would I fillRect with an image?

问题描述

通常，您可以使用 ctx.fillStyle =这里的颜色 然后选择 ctx.fillRect（编码和长度和宽度）。有没有一种语法可以让我说 ctx.fillRect（someImagePathHere，xOfTopLeft，yofTopLeft）

Normally you can fill a rectangle in a canvas withctx.fillStyle = "whatever color here" and then ctx.fillRect(cords and length and width here). Is there a syntax where I can say ctx.fillRect(someImagePathHere, xOfTopLeft, yofTopLeft)

如果没有，如何

推荐答案

下面是一个简单的示例，说明如何使用 drawImage 将图像绘制到画布上。

Here is a quick example of how you can use drawImage to draw an image to a canvas. The element on the left is the image, the element on the right is the canvas with the image drawn on it.

JSFiddle： https://jsfiddle.net/gw8ncg7g/

JSFiddle: https://jsfiddle.net/gw8ncg7g/

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("image");
    ctx.drawImage(img, 0, 0);
}

canvas {
    border:1px solid #d3d3d3;
}

<img id="image" width="300" height="300" src="http://i.imgur.com/LDR6AWn.png?1">
<canvas id="myCanvas" width="300" height="300" >

这篇关于如何用图像填充图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！