0

スライダーが特定の値に達したときに表示される背景 (「長方形」) とその上にあるさまざまなキャンバス形状 (「円」と「正方形」など) としてキャンバス形状を使用したいと考えています。

jQueryスライダーでさまざまな画像を表示する方法を見つけましたが、そのスライダーで画像の代わりにさまざまなキャンバス形状を表示することもできますか?

ここにキャンバスの形があります

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="rectangle" width="240" height="440" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
    <canvas id="circle" width="240" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
    <canvas id="square" width="240" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

    <script>
      var canvas = document.getElementById('rectangle');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(20, 20, 200, 400);
      context.fillStyle = 'blue';
      context.fill();

      var canvas = document.getElementById('circle');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 80;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();

      var canvas = document.getElementById('square');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(40, 40, 160, 160);
      context.fillStyle = 'red';
      context.fill();
    </script>
  </body>
</html>

ここでは、画像が変化するスライダー

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
  <style>#slider { margin: 10px; }  </style>
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

  <script>

  $(document).ready(function() {
      var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/');
      var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/');
      var foto = $('#div1');

      foto.html(img1);

      $("#slider").slider({
          slide: function(event, ui) {
              if (ui.value > 50) {
                  $('#div1').html(img2);
              } else {
                  $('#div1').html(img1);
              }
          }
      });
  });

  </script>

</head>
<body>

<div id="slider"></div>
<div id="div1"></div>
</body>
</html>
4

1 に答える 1

0

できますよ。次のように、(src を変更する代わりに) コードを混ぜて、各オブジェクトの表示方法を変更するだけです。

コード

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <script>
    window.onload = function() {
    var canvas = document.getElementById('rectangle');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.rect(20, 20, 200, 400);
    context.fillStyle = 'blue';
    context.fill();

    var canvas = document.getElementById('circle');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 80;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();

    var canvas = document.getElementById('square');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(40, 40, 160, 160);
    context.fillStyle = 'red';
    context.fill();

    $(document).ready(function() {
      var shape1 = $('#rectangle');
      var shape2 = $('#circle');
      var shape3 = $('#square');
      shape1.css({'display':'block'});
      shape2.css({'display':'none'});
      shape3.css({'display':'none'});

      $("#slider").slider({
        slide: function(event, ui) {
          if (ui.value > 66) {
            shape2.css({'display':'none'});
            shape3.css({'display':'block'});
          } 
          else if(ui.value > 33) {
            shape1.css({'display':'none'});
            shape2.css({'display':'block'});
            shape3.css({'display':'none'});
          }
          else {
            shape1.css({'display':'block'});
            shape2.css({'display':'none'});
          }
        }
      });
    });
    }

  </script>
</head>
<body>
  <canvas id="rectangle" width="240" height="440" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
  <canvas id="circle" width="240" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
  <canvas id="square" width="240" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
  <div id="slider"></div>
</body>
</html>
于 2013-08-13T20:32:32.850 に答える