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

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>