时间戳

首页 > 解决方案 > 为什么我清除后不重绘图像？

javascript - 为什么我清除后不重绘图像？

问题描述

清除后我想重绘我的图像（现在它只是静态的，但将来会是动画的）。它画了一次，然后清除它，但从不重画图像，这是为什么？

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var width = 640;
var height = 145;

var width2 = 640;
var height2 = 145;

startInterval();

function startInterval() {
  setInterval(function(){
    ctx.clearRect(0, 0, 640, 145);

    var text = new Image();
    var background = new Image();
    text.src = "../assets/img/title.svg";
    background.src = "../assets/img/mask.png";

    text.onload = function() {
      background.onload = function() {
        ctx.drawImage(text, 0, 0);
        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(background, 0, 0, width, height);
        console.log("Drew image");
      };
    }
  }, 2000);
}

标签： javascripthtml5-canvas

解决方案

您的主要问题是您永远不会重置globalCompositeOperation上下文的属性。

而且由于source-in只会绘制位于现有非透明像素上的新像素，因此如果您的上下文完全清楚，您将不会添加任何新像素。

source-over要修复它，请在完成合成后将 gCO 设置为默认值。

现在，我不能让你使用这样的代码......

不要嵌套这样的加载事件，您希望两者都触发，并且您很幸运拥有此 setInterval，否则您可能会在将处理程序附加到它之前触发背景的事件。

也不要src像那样重置你的图像。

相反，加载一次资产，等待所有资产加载完毕，然后才开始例程/绘图。

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

var toLoad = 2; // how many assets are we waiting for
var assetsLoaded = 0; // a counter
var text = new Image();
var background = new Image();
// set the same handler for both Images
text.onload = background.onload = onassetload;
text.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
background.src = 'https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg';

function onassetload() {
 assetsLoaded = assetsLoaded + 1; // udpate our counter
 if(assetsLoaded >= toLoad) { // all assets are ready
   startInterval();
 }
}
function startInterval() {
  c.width = text.width;
  c.height = text.height;
  setInterval(draw, 2000);
  draw();
function draw(){
    // here we just draw, no Image loading anymore
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.drawImage(text, 0, 0);
    ctx.globalCompositeOperation = 'source-in';
    ctx.drawImage(background, 0, 0);
    // reset the gCO to its default
    ctx.globalCompositeOperation = 'source-over';
    console.log("Drew image");
  }
}
<canvas id="myCanvas"></canvas>

推荐阅读