有没有办法在 HTML5 画布 2d 图纸上绘制图像？

Question

每次我用谷歌搜索这个，它都会给我反向解决方案的答案——在图像上绘制东西。我知道该怎么做。

我的问题是我想在一些画布上绘制我的图像。无论我做什么，似乎绘图总是与图像重叠。

问题可能是我在动画循环中执行此操作，并且不知何故没有绘制图像？

你可以看到我的代码here。 （只是很短）。

如您所见，在我的绘图函数中，我有在绘制其他内容之后绘制的图像。我通过注释掉代码检查了图像是否正确绘制，嘿，图像出现了。 drawImage代码如下：

var drawCanvasImage = new Image();
drawCanvasImage.src = "https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png";
drawCanvasImage.onload = function(){ 
  ctx.drawImage(drawCanvasImage, 0, 0); 
}

谁能提供对此的见解？谢谢。

Answer 1

你应该这样做：

1. 加载所有必要的资源。图像、音频等。

   如果需要，您可以显示“正在加载”消息。

2. 开始绘画/复制/随便什么。

   既然有资源，可以直接使用。

   在此处避免使用 load 事件处理程序。

var drawCanvasImage = new Image();
drawCanvasImage.onload = function(){
  animFrame(recursiveAnim);
};
drawCanvasImage.src = "myimage";
function drawScreen() {
  // ...
  ctx.drawImage(drawCanvasImage, 0, 0); 
}

var animFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame    || window.oRequestAnimationFrame      || window.msRequestAnimationFrame     || null ;

window.addEventListener('mousemove', saveMove, false);

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

//Global vars
var clickX, clickY;

//Loops through to draw the graphics
mainLoop = function() {
  drawScreen();
};

//This loops the animation frames
var recursiveAnim = function() {
  mainLoop();
  animFrame(recursiveAnim);//
};
var drawCanvasImage = new Image();
drawCanvasImage.onload = function(){
  animFrame(recursiveAnim);
};
drawCanvasImage.src = "https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png";


function drawScreen() {
  //sky
  ctx.fillStyle="#33ccff";
  ctx.fillRect(0, 0, c.width, c.height);
  //sun
  ctx.beginPath();
  ctx.arc(680, 150, 90, 10, Math.PI, true);
  ctx.closePath();
  ctx.lineWidth = 5;
  ctx.fillStyle = '#ffff33';
  ctx.fill();
  ctx.strokeStyle = '#b2b300';
  ctx.stroke();  
  //grass
  ctx.beginPath();
  ctx.arc(350, 950, 800, 0, Math.PI, true);
  ctx.closePath();
  ctx.lineWidth = 5;
  ctx.fillStyle = '#3fff00';
  ctx.fill();
  ctx.strokeStyle = '#1f8000';
  ctx.stroke();

  ctx.drawImage(drawCanvasImage, 0, 0); 

  //Hey SO, thanks for checking this out! :)
}


// Mouse click stuff #############################################
{
  function saveMove(e) {
    var pos = getMousePos(c, e);
    clickX = pos.x;
    clickY = pos.y;
  }

  function getMousePos(c, evt) {
    var rect = c.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    }
  }  
}

.title {
  font-family: "Helvetica", sans-serif;
}

<canvas id="myCanvas" width="800" height="300" style="border:1px solid #000000"></canvas>