HTML5 Canvas - 在更新循环中绘制图像答案

【问题标题】：HTML5 Canvas - Draw image in update loopHTML5 Canvas - 在更新循环中绘制图像
【发布时间】：2019-03-14 20:20:30
【问题描述】：

我有一个 html5 画布，用来画圆圈。这些圆圈需要图像在它们的中心，但也需要更新。在this SO question的帮助下我想出了这段代码来绘制所有内容：

 var Circle1 = new Circle((c.width / 8) + (c.width / 2), 200, eighthWidth / 2.5, Color1, "1");    
 var Circle2 = new Circle(c.width - eighthWidth, 200, eighthWidth / 2.5, Color2, "2");

 function Circle(x, y, radius, color, name) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.name = name;

    this.draw = function () {
        var MiddleImage = new Image();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
        ctx.drawImage(MiddleImage, this.x - MiddleImage.width / 2, this.y - MiddleImage.height / 2);
        MiddleImage.src = "/Images/" + this.name + ".png";
    }

    this.update = function () {
        this.x += 1;
        this.draw();
    }

    this.update();
}

这并没有像我希望的那样绘制图像，但是如果我像下面这样取出这个方法，它确实有效吗？

function drawCircle() {
    var MiddleImage = new Image();
    MiddleImage.onload = function () {
        var X = c.width - eighthWidth;
        var Y = 200;
        ctx.beginPath();
        ctx.arc(X, Y, eighthWidth / 2.5, 0, 2 * Math.PI);
        ctx.clip;
        ctx.fillStyle = Color1;
        ctx.fill();
        ctx.closePath();
        ctx.drawImage(MiddleImage, X - MiddleImage.width / 2, Y - MiddleImage.height / 2);
    };
    BankImage.src = "/Images/1.png";

    requestAnimationFrame(drawCircle);
}

我也尝试过使用 Image.onLoad 方法，因为我已将工作方法复制到新循环中。控制台没有显示任何错误。

你可以看到一个 JSFiddle here

【问题讨论】：

我认为圆弧计算可能被破坏了。
弧线绘制和更新完美，不知道你的意思？
请将您的完整代码 sn-p 添加到 jsfiddle 以便我们查看
请将您的完整代码 sn-p 添加到 jsfiddle 以便我们查看
JSFiddle 这里：jsfiddle.net/eat8x41o

标签： javascript html html5-canvas

【解决方案1】：

您遇到的问题是您在每一帧都在 draw 函数中加载图像，而不是等待它被加载。

我已经稍微调整了您的代码，以便它可以根据需要加载图像并将其附加到您的圈子。

var c = document.getElementById('canvas');
c.width = window.innerWidth;
c.height = 400;
var ctx = c.getContext("2d");

var eighthWidth = c.width / 8;

var Color1 = "#9c9c9b";
var Color2 = "#9c9c9b";

var Circle1 = new Circle((c.width / 8) + (c.width / 2), 200, eighthWidth / 2.5, Color1, "1");
var Circle2 = new Circle(c.width - eighthWidth, 200, eighthWidth / 2.5, Color2, "2");

function Circle(x, y, radius, color, name) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;
  this.name = name;
  this.image = new Image();
  this.image.src = "https://www.gstatic.com/webp/gallery3/1.png";
  var _this = this;
  
  this.image_loaded = false;
  this.image.addEventListener('load', function() {
  _this.image_loaded = true;
  } );

  this.draw = function() {
    
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
    ctx.save();
    ctx.clip();
    
    ctx.drawImage(this.image, this.x - this.image.width / 2, this.y - this.image.height / 2);
    ctx.restore();
    
  }
  

  this.update = function() {
    //if(!this.image_loaded) return; 
    this.x += 1;
    this.draw();
  }
}

function animate() {
  ctx.clearRect(0, 0, window.innerWidth, 400);
  Circle1.update();
  Circle2.update();
  requestAnimationFrame(animate);
}
animate();

&lt;canvas id="canvas" style="width:100%;"&gt;&lt;/canvas&gt;

这是你想要的吗？

【讨论】：