Question

我正在为一个项目创建一个示例，该示例中我想从我制作的其他自定义滚动条控制画布的滚动动作。

在这段代码中，我进行了一个除法，该除法又有两个div，其中一个包含两个画布，另一个包含滚动器

我希望我的canvas-myCanvas1由我制作的滚动条控制

var ctx;
var canvas;

function wrapText(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(' ');
  var line = '';

  for (var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  }

  context.fillText(line, x, y);
}
window.onload = function() {
  canvas1 = document.getElementById("myCanvas1");
  ctx1 = canvas1.getContext('2d');
  canvas2 = document.getElementById("myCanvas2");
  ctx2 = canvas2.getContext('2d');
  ctx1.font = "18px Arial";
  ctx2.font = "18px Arial";
  var maxWidth = 400;
  var lineHeight = 25;
  var x = (canvas1.width - maxWidth) / 2;
  var y = 60;
  var text = "Stephen William Hawking CH CBE FRS FRSA (8 January 1942 – 14 March 2018) was an English theoretical physicist, cosmologist, and author who was director of research at the Centre for Theoretical Cosmology at the University of Cambridge at the time of his death.[17][18][7] He was the Lucasian Professor of Mathematics at the University of Cambridge between 1979 and 2009.His scientific works included a collaboration with Roger Penrose on gravitational singularity theorems in the framework of general relativity and the theoretical prediction that black holes emit radiation, often called Hawking radiation. Hawking was the first to set out a theory of cosmology explained by a union of the general theory of relativity and quantum mechanics. He was a vigorous supporter of the many-worlds interpretation of quantum mechanics.Hawking achieved commercial success with several works of popular science in which he discusses his own theories and cosmology in general. His book A Brief History of Time appeared on the British Sunday Times best-seller list for a record-breaking 237 weeks. Hawking was a Fellow of the Royal Society (FRS), a lifetime member of the Pontifical Academy of Sciences, and a recipient of the Presidential Medal of Freedom, the highest civilian award in the United States. In 2002, Hawking was ranked number 25 in the BBC's poll of the 100 Greatest Britons.In 1963, Hawking was diagnosed with an early-onset slow-progressing form of motor neurone disease (MND; also known as amyotrophic lateral sclerosis ALS or Lou Gehrig's disease) that gradually paralysed him over the decades.[21][22] Even after the loss of his speech, he was still able to communicate through a speech-generating device, initially through use of a hand-held switch, and eventually by using a single cheek muscle. He died on 14 March 2018 at the age of 76, after living with the disease for more than 50 years.";
  wrapText(ctx1, text, x, y, maxWidth, lineHeight);
  ctx2.fillText("CANVAS", 250, 250);

}

.scrollbar {
  margin-left: 30px;
  float: right;
  height: 600px;
  width: 50px;
  background: #fbfbfb69;
  overflow-y: scroll;
  margin-bottom: 0px;
}

.force-overflow {
  min-height: 800px;
}

#wrapper {
  text-align: center;
  width: 300px;
  margin: auto;
}

#style-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
  width: 7px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

.left {
  display: inline-block;
}

.right {
  display: inline-block;
}

<br><br>
<center>
  <div height="700" width="500" style="background-color: #fbfbfb69">
    <div class="left" style="max-height: 600px;max-width: width window;overflow: hidden;" onscroll="oninput">
      <canvas id="myCanvas1" height="1100px" width="600px" style="background-color: #fbfbfb69; "></canvas>
      <canvas id="myCanvas2" height="600" width="600" style="background-color: #fbfbfb69"></canvas>
    </div>
    <div class="scrollbar right" id="style-1">
      <div id='myId' class="force-overflow"></div>
    </div>
  </div>
</center>

enter image description here

Answer 1

您可以在Canvas2上简单地使用css range slider element来代替div元素。

据我所知，链接中的css适用于firefox，chrome和IE，只需稍微修改一下外观即可。

请注意，您必须为所有类型的浏览器编写CSS，否则外观将不一致。

HTML应该是：

<input type="range" min="minVal" max="maxVal" ...>

如何使用其他滚动条控制画布的滚动

1 个答案: