0

我开始从头开始构建我的新（照片）主页，以便更好地控制并希望让我更容易更新它。可以帮助我轻松更新主页的一件事是，如果主页可以索引应该显示的照片，而不是我索引图片并在代码中添加新图片，代码可以有一个自己的更新向量文件夹更新为新图片后。如果我有一个幻灯片，点击时会发生变化，我现在有这个代码：

<section id="main_section">
    <canvas id="myCanvas" width="1280" height="960"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'landscape1.jpg';
  canvas.addEventListener('click', function() {imageObj.src = 'landscape2.jpg'; }, false);
</script>

我希望更改最后一个功能，以便在每次单击时它都会更改为矢量中的下一张图片。IE 

canvas.addEventListener('click', function() {x=x+1; imageObj.src = vector(x); }, false);

其中向量保存图片文件的名称。假设我在与 html 文件相同的文件夹中有 y 个以“风景”开头的图片，我该如何创建这个矢量？我希望问题很清楚

4

1 回答 1

0

我认为这段代码可以提供帮助：

  1. 使用数组
<canvas id="myCanvas" width="1280" height="960"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      var vector = new Array('landscape1.jpg','landspcape2.jpg','landscape3.jpg');//to y
      var x=1;
      imageObj.onload = function() {
           context.fillStyle = "#ffffff";
            context.fillRect(0,0,1280,960);
           context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = vector[0];
      canvas.addEventListener('click', function() {
     if(++x>vector.length)x=1;
     imageObj.src = vector[x]; }, false);
    </script>

2 或者只使用名称而不是数组

    <canvas id="myCanvas" width="1280" height="960"></canvas>
      <script>
                      var canvas = document.getElementById('myCanvas');
                      var context = canvas.getContext('2d');
                      var imageObj = new Image();
                      var x=1;

                      imageObj.onload = function() {
                           context.fillStyle = "#ffffff";
                            context.fillRect(0,0,1280,960);
                           context.drawImage(imageObj, 0, 0);
                      };
                      imageObj.src = 'landscape1.jpg'
                      canvas.addEventListener('click', function() {
                     imageObj.src = 'landscape' + (++x) + '.jpg' }, false);
</script>
于 2013-01-14T07:49:53.760 回答