创建图像来绘制东西，然后在画布上绘制图像

Question

大家好！

是否可以使用 JavaScript 创建图像然后在其上渲染形状，然后将其绘制到游戏画布上？

无需使用 dataurl、url 或 src，就可以了！

var ctx = document.getElementById("canvas").getContext("2d");

var img = new Image();

// TODO: Draw stuff to the image img

function game() {

    window.requestAnimationFrame(game);

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.drawImage(img, 0, 0, 256, 256);

}

window.requestAnimationFrame(game);

Answer 1

该CanvasRenderingContext2D.drawImage()功能可以将多种类型的图像作为源，包括另一个 Canvas。下面的示例显示图像已加载到第一个画布中。然后你可以通过按住鼠标并移动它来绘制它。当您释放时，第二个画布将绘制第一个画布当时的图像。所有的魔法都在最后一个函数中。contextTwo.drawImage(canvasOne, 0, 0, 256, 256);const canvasOne = document.getElementById('canvas1');const canvasTwo = document.getElementById('canvas2');const contextOne = canvasOne.getContext('2d');const contextTwo = canvasTwo.getContext('2d');canvasOne.width = 256;canvasOne.height = 256;canvasTwo.width = 256;canvasTwo.height = 256;const canvasBounds = canvasOne.getBoundingClientRect();let mouseData = {  isClicked: false,  position: [0, 0],}const onMouseDown = event => {  mouseData.isClicked = true;  render();};const onMouseMove = ({ clientX, clientY }) => {  const x = clientX - canvasBounds.left;  const y = clientY - canvasBounds.top;  mouseData.position = [x, y];  render();};const onMouseUp = event => {  mouseData.isClicked = false;  render();  moveImage();};function setup() {  const img = new Image();  img.src = '//picsum.photos/256/256'  img.onload = function() {    contextOne.drawImage(img, 0, 0, 256, 256);  }    canvasOne.addEventListener('mousedown', onMouseDown);  canvasOne.addEventListener('mousemove', onMouseMove);  canvasOne.addEventListener('mouseup', onMouseUp);}function render() {  requestAnimationFrame(() => {    const { isClicked, position } = mouseData;    const [ x, y ] = position;    if (isClicked) {      contextOne.beginPath();      contextOne.arc(x, y, 5, 0, Math.PI * 2)      contextOne.fillStyle = 'red'      contextOne.fill();      contextOne.closePath();    }  });}function moveImage() {  contextTwo.drawImage(canvasOne, 0, 0, 256, 256);}setup();body {  display: flex;}canvas {  width: 256px;  height: 256px;  border: 1px solid #d0d0d0;}<canvas id="canvas1"></canvas><canvas id="canvas2"></canvas>