0

I want to have a canvas shape as a background ("rectangle") and above that different canvas shapes (e.g "circle" and "square"), which should show up when the slider reaches a specific value.

I found the way to show different images with the jQuery slider, but is it also possible to show different canvas shapes instead of images with that slider and how?

here are the canvas shapes

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

and here the slider with changing images

<!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 回答