javascript - 高级 JavaScript/HTML5 画布

问题描述

我正在学习 HTML5（画布）和高级 JavaScript（模块、原型等），并想重构我放在一起的基本片段。

如何重用我的函数来处理同一页面上的多个画布元素？我发现这篇文章描述了我希望实现的一般想法。但是，我遇到了问题，因为我draw()在更新页面上的输入时调用了我的方法，这导致我丢失了上下文。这是我到目前为止的一个片段：

var sliderModule = (function(win, doc) {

  win.onload = init;

  // canvas and context variables
  var canvas1, canvas2, canvas3;
  var context1, context2, context3;

  function init() {
    // draw the initial pattern
    drawPattern1();
    drawPattern2();
    drawPattern3();
  }


  // called whenever the slider value changes
  function drawPattern1() {
    const canvas = document.getElementById('bullsEye1');
    const context = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 100;

    const colors = ['#F00', '#00F'];
    const outerRadius = 50;
    let bandSize = doc.getElementById("bandWidth1").value;
    doc.getElementById("currentBandWidth1").innerHTML = bandSize;
    for (
      let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length
    ) {
      context.fillStyle = colors[colorIndex];
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2);
      context.closePath();
      context.fill();
    }
  }

  function drawPattern2() {
    const canvas = document.getElementById('bullsEye2');
    const context = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 100;

    const colors = ['#F00', '#00F'];
    const outerRadius = 50;
    let bandSize = doc.getElementById("bandWidth2").value;
    doc.getElementById("currentBandWidth2").innerHTML = bandSize;
    for (
      let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length
    ) {
      context.fillStyle = colors[colorIndex];
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2);
      context.closePath();
      context.fill();
    }
  }

  function drawPattern3() {
    const canvas = document.getElementById('bullsEye3');
    const context = canvas.getContext('2d');
    canvas.width = 100;
    canvas.height = 100;

    const colors = ['#F00', '#00F'];
    const outerRadius = 50;
    let bandSize = doc.getElementById("bandWidth3").value;
    doc.getElementById("currentBandWidth3").innerHTML = bandSize;
    for (
      let r = outerRadius, colorIndex = 0; r > 0; r -= bandSize, colorIndex = (colorIndex + 1) % colors.length
    ) {
      context.fillStyle = colors[colorIndex];
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2);
      context.closePath();
      context.fill();
    }
  }

  return {
    drawPattern1: drawPattern1,
    drawPattern2: drawPattern2,
    drawPattern3: drawPattern3
  };

})(window, document);

main {
  width: 100%;
}

div {
  width: 30%;
}

#left {
  float: left;
  margin-left: 2%;
}

#middle {
  position: relative;
  left: 0px;
  right: 0px;
  margin: auto;
}

#right {
  float: right;
  margin-right: 2%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<title>Bulls Eye</title>

<head>
</head>

<body>
  <main>
    <div id="left">
      <canvas id="bullsEye1" style="border: 1px solid;">                  </canvas><br>
      <label for="bandWidth1">BandWidth:</label>
      <input type="range" id="bandWidth1" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern1()"></input>
      <p>Current band width: <span id="currentBandWidth1"></span></p>
    </div>
    <div id="right">
      <canvas id="bullsEye2" style="border: 1px solid;"></canvas><br>
      <label for="bandWidth2">BandWidth:</label>
      <input type="range" id="bandWidth2" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern2()"></input>
      <p>Current band width: <span id="currentBandWidth2"></span></p>
    </div>
    <div id="middle">
      <canvas id="bullsEye3" style="border: 1px solid;"></canvas><br>
      <label for="bandWidth3">BandWidth:</label>
      <input type="range" id="bandWidth3" min="5" max="50" step="5" value="25" oninput="sliderModule.drawPattern3()"></input>
      <p>Current band width: <span id="currentBandWidth3"></span></p>
    </div>
    <br style="clear:both;" />
  </main>

</html>

标签： javascripthtmldesign-patternshtml5-canvasprototype

javascript - 高级 JavaScript/HTML5 画布

问题描述

解决方案

推荐阅读