Question

我希望将画布形状作为背景（“矩形”），并在不同的画布形状（例如“圆形”和“方形”）之上，当滑块达到特定值时，它应显示。

我找到了使用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>

Answer 1

当然可以。您只需混合代码并更改每个对象的显示方式（而不是更改src）like this！

守则

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

滑块以特定值显示不同的画布形状

1 个答案: