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

如何解决创建图像以向其绘制东西，然后在画布上绘制图像

大家好！

是否可以使用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,ctx.canvas.width,ctx.canvas.height);
    ctx.drawImage(img,256,256);
}

window.requestAnimationFrame(game);

解决方法

CanvasRenderingContext2D.drawImage()函数可以将多种类型的图像用作源，包括另一个Canvas。下面的示例显示在第一个画布中加载了图像。然后，您可以通过按住鼠标并移动它来画图。当您释放第二个画布时，将立即绘制第一个画布的图像。

所有的魔力都在最后一个功能上。

contextTwo.drawImage(canvasOne,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,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,Math.PI * 2)
      contextOne.fillStyle = 'red'
      contextOne.fill();
      contextOne.closePath();
    }
  });
}

function moveImage() {
  contextTwo.drawImage(canvasOne,256);
}

setup();

body {
  display: flex;
}

canvas {
  width: 256px;
  height: 256px;
  border: 1px solid #d0d0d0;
}

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>