如何用图像填充图像？

本文介绍了如何用图像填充图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

通常，您可以使用 ctx.fillStyle =这里的颜色

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： jsfiddle/gw8ncg7g/

JSFiddle: jsfiddle/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="i.imgur/LDR6AWn.png?1"> <canvas id="myCanvas" width="300" height="300" >