Question

我正在为我的研究构建应用程序，我是画布的新手。我试图用一组图像制作一个视频，我需要能够动态地改变一个特定的帧。我成功制作了视频但是当我到达时无法修改特定的帧。以下是相同的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Images with intervals</title>
</head>
<body>

<canvas id="myCanvas1" width="400" height="200" style="position:absolute;right:0; margin-right:auto; background-color:#bbb"></canvas>
<canvas id="myCanvas2" width="400" height="200" style="position:absolute;left:0; margin-left:auto; background-color:#666"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas2');
var context = canvas.getContext('2d');
var i = 0;
var im1 = 'images/img1.png';
function drawScreen() {

    context.drawImage(im1, 0, 0,50,50);
}

setInterval(function() {
  var im = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png', 'images/img5.png'];
  // Create the image object
  var img = new Image();
  //alert(window["i"]);

  // If the image is loaded draw it on canvas
  img.addEventListener('load', function() {
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0);
  });
  //alert(window["i"]);

  // pass in the image source
  img.src = im[i++];
  alert(window["i"]);
  // if the image is last, change it back to the first
  i = i > im.length - 1 ? 0 : i;
  //alert(window["i"]);
  if(i==3) 
       { drawScreen();
         //alert(window["i"]); 
       }
}, 1000);


</script>
</body>
</html>

当i = 3的值（根据setInterval函数在3秒内表示）时，我试图显示另一个图像＆＃39; im1＆＃39;举个例子，我无法做到。我是HTML5和canvas的新手。任何帮助和建议都非常感谢。

在HTML5画布中对视频帧进行像素修改

0 个答案: