0

新しい (写真) ホームページをゼロから構築し始めています。これは、管理を改善し、できれば更新しやすくするためです。ホームページを簡単に更新するのに役立つことの 1 つは、画像にインデックスを付けてコードに新しい画像を追加する代わりに、表示する必要がある写真にホームページがインデックスを付けることができる場合です。コードには、更新される独自のベクトルを含めることができます。フォルダが新しい画像で更新されるとすぐに。クリックすると変化するスライドショーを作成する場合、次のコードがあります。

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

私の希望は、最後の関数を変更して、クリックするたびにベクトル内の次の画像に変更することです。すなわち 

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 に答える