Processing 函数的作用是：在画布外部创建滑块。如何在画布内定位滑块？

我正在尝试使用p5.js在画布中实现一个滑块。如果网页正文中没有HTML元素，则画布和滑块位于网页的左上角

但是，当我更改画布的位置时，滑块不会停留在画布内。position方法设置滑块相对于网页的绝对位置

如何设置滑块在画布中的位置

这是复制问题的最低限度代码

p5.js示例
正文{填充：0；边距：0；}

这是一些文本。这是一些文本。这是一些文本

sketch.js

文件是：

var滑块；
函数设置（）{
slider=createSlider（0,255,100）；
滑块位置（10,10）；
slider.style（'width'，'80px'）；
}
函数绘图（）{
var val=slider.value（）；
背景（val）；
}

p5.js'

createSlider（）

函数创建一个与它用于渲染其他方法的

元素不同的

您可以将绝对定位与结合使用，使画布具有较低的z索引，滑块具有较高的z索引（位于画布顶部），两者都具有所需的绝对位置

如果确实希望在canvas元素中呈现滑块，可以使用p5.js绘图函数和鼠标/触摸事件来滚动自己的滑块类，但其CPU效率不如使用

范围HTML元素

下面是移植到p5.js的处理>示例>主题>GUI>滚动条示例：

/**
*滚动条。
* 
*左右移动滚动条可更改图像的位置。
*/
让滑块；
函数设置（）{
createCanvas（640360）；
仰泳（）；
滑块=新的HScrollbar（0，高度/2-8，宽度，16,16）；
}
函数绘图（）{
背景（255）；
填充（0）；
文本（“滑块位置：”+slider.getPos（）.toFixed（2），宽度/2，高度/3）；
slider.update（）；
slider.display（）；
}
HScrollbar类{
建造商（xp、yp、sw、sh、l）{
this.swidth=sw；
this.sheight=sh；
让宽度到高度=sw-sh；
该比值=sw/宽度与高度；
this.xpos=xp；
this.ypos=yp-this.sheight/2；
this.spos=this.xpos+this.swidth/2-this.sheight/2；
this.newspos=this.spos；
this.sposMin=this.xpos；
this.sposMax=this.xpos+this.swidth-this.sheight；
这个.loose=l；
this.over=false；
this.locked=false；
}
更新（）{
if（this.overEvent（））{
这是真的；
}否则{
this.over=false；
}
如果（按下鼠标（&this.over）{
this.locked=true；
}
如果（！鼠标按下）{
this.locked=false；
}
如果（此项已锁定）{
this.newspos=constraint（mouseX-this.sheight/2，this.sposMin，this.sposMax）；
}
如果（abs（this.newspos-this.spos）>1）{
this.spos=this.spos+（this.newspos this.spos）/this.loose；
}
}
过度发泄{
如果（mouseX>this.xpos&&mouseXthis.ypos&&mouseY

请检查以下内容： CSlider-支持scale（）的p5.js画布滑块，主要支持标准p5滑块调用：