Question

每次我谷歌这个，它给了我反向解决方案的答案 - 在图像上绘制东西。我知道怎么做。

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

问题可能是我在动画循环中这样做，而且不知道是不是在绘制图像？

您可以看到我的代码here。（它只是短暂的。）

正如你所看到的，在我的绘图功能中，我绘制了在绘制其他内容之后绘制的图像。我通过注释掉代码来检查图像是否正确绘制并且嘿presto，图像出现。 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

你应该这样做：

加载所有必要的资源。图像，音频等等。

您可以显示＆＃34; loading＆＃34;如果你愿意，请留言。
开始绘画/复制/无论如何。

由于资源可用，您可以直接使用它们。

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

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

＆＃13;

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
    }
  }  
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: