如何使用html5 canvas和JQuery Tools制作滚动条？

Question

我正在尝试制作这样的网络温度计（这是我的想法的图纸）

我能够用Html5画布绘制温度计的主体，但它都是静态的 - 我无法与之交互。我需要两个可编辑的文本框，更重要的是我需要一个类似滚动条的控件，这样当用户拖动它时，文本框中的数字就会改变。

最简单的方法是什么？

我知道JQuery Tools提供ready-made range inputs，这与我需要的非常相似，因为这些范围输入带有文本框。但这是正确的方法吗？我尝试使用Jquery Tools范围输入但未能将其与我的画布合并。此外，我不知道是否可以在范围输入中添加额外的文本框。

Answer 1

你可以改变你提到的插件的CSS，并使其在上面的照片中完全可见..

Answer 2

一点sudo代码

onmouseclick（target = thermomoterGrippie）    {     this.grippie =活跃    }

的OnMouseMove（事件）  {

}

一旦你可以改变RED的大小。然后你可以根据红色尺寸制作一个计算温度的算法