Javascript 在HTML画布上呈现x轴，当用户在画布上平移时，x轴会进行调整

我希望在HTML

画布上呈现时间x轴，在平移（单击+拖动）或缩放时进行调整

图表JS库可能已经存在，用于曲线/图表，但在我的例子中，x轴上的数据将不是曲线，因此我需要从头开始

在这里，当我在背景上单击并拖动时，原点
x
会进行调整，这很好（请参见代码片段）但是如何在
画布的底部呈现这样的文本x轴
？

--------------------------------------------------
|           |           |            |           |
jan 02      jan 03      jan 04       jan 05      jan 06


var-drag=false；
var x=0；
var last_position={}；
document.getElementById（'canvas'）.onmousedown=function（）{drag=true；}
document.getElementById（'canvas'）.onmouseup=function（）{drag=false；}
document.getElementById（'canvas'）.onmousemove=function（e）{
var deltaX=最后一个位置.x-e.clientX，
deltaY=最后位置y-e.clientY；
如果（拖动&typeof（last_position.x）！='undefined'）{
x+=代尔税；
document.getElementById（'pos'）.innerHTML=x；
} 
最后位置={x:e.clientX，y:e.clientY}；
}
#画布{宽度：400px；高度：150px；背景色：#ccc；}
您只需从所需的屏幕坐标中减去x位置，请参见下面的示例


/*
*您的原始代码：
*/
var-drag=false；
var x=0；
var last_position={}；
document.getElementById（'canvas'）.onmousedown=function（）{drag=true；}
document.getElementById（'canvas'）.onmouseup=function（）{drag=false；}
document.getElementById（'canvas'）.onmousemove=function（e）{
var deltaX=最后一个位置.x-e.clientX，
deltaY=最后位置y-e.clientY；
如果（拖动&typeof（last_position.x）！='undefined'）{
x+=代尔税；
document.getElementById（'pos'）.innerHTML=x；
} 
最后位置={x:e.clientX，y:e.clientY}；
}
/*
*一种简单的绘制文本方法：
*/
函数drawText（上下文、文本、x、y）{
context.font=“12px Arial”；
context.fillStyle=“红色”；
context.textAlign=“中心”；
填充文本（文本，x，y）；
}
/*
*下面使用“requestAnimationFrame”运行渲染循环：
*有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame 
*/
函数render（）{
var canvas=document.getElementById（'canvas'）
var context=canvas.getContext（“2d”）；
/*我们必须在渲染任何其他内容之前清除画布*/
clearRect（0，0，canvas.width，canvas.height）；
*这可以改进一个公平的比特，考虑使用循环/非魔法数字。*/
drawText（上下文，“1月1日”，30-x，canvas.height-12）；
drawText（上下文，“1月2日”，100-x，canvas.height-12）；
drawText（上下文，“1月3日”，170-x，canvas.height-12）；
drawText（上下文，“1月4日”，240-x，canvas.height-12）；
drawText（上下文，“1月5日”，310-x，canvas.height-12）；
请求动画帧（渲染）；
}
render（）
#画布{宽度：400px；高度：150px；背景色：#ccc；}

0
根据Jacobbersi的回答（99.9%归功于他），以下是一个解决方案：


函数格式日期（日期）{
var monthNames=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var day=date.getDate（），monthIndex=date.getMonth（），year=date.getFullYear（）.toString（）.substr（-2）；
返回日+''+月[月]日+''+年；
}
var-drag=false；
var x=0；
var last_position={}；
var canvas=document.getElementById（'canvas'）；
canvas.width=canvas.getBoundingClientRect（）.width；//重要的是要防止文本模糊问题：https://stackoverflow.com/q/15661339/1422096
canvas.height=canvas.getBoundingClientRect（）.height；
canvas.onmousedown=function（）{drag=true；}
document.onmouseup=function（）{drag=false；}
canvas.onmousemove=函数（e）{
var deltaX=最后一个位置.x-e.clientX，
deltaY=最后位置y-e.clientY；
如果（拖动&typeof（last_position.x）！='undefined'）{
x+=代尔税；
} 
最后位置={x:e.clientX，y:e.clientY}；
}
函数drawText（上下文、文本、x、y）{
context.font=“10px Arial”；
context.fillStyle=“黑色”；
context.textAlign=“中心”；
填充文本（文本，x，y）；
}
函数render（）{
var canvas=document.getElementById（'canvas'）
var context=canvas.getContext（“2d”）；
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=数学圆（-2000+x）/200）；200*i-x<2000；i++）{
var d=新日期（）；
d、 设置时间（d.getTime（）+i*3600*24*1000）；
var s=形成日期（d）；
drawText（上下文，s，200*i-x，canvas.height-8）；
}
请求动画帧（渲染）；
}
render（）
*{margin:0；padding:0；border:0；}
正文，html{height:100%}
#画布{宽度：100%；高度：75%；背景色：#ccc；}
#画布2{宽度：100%；高度：25%；背景色：#aaa；}

非常感谢！就是这个主意！事实上，我希望它是一个无限的x轴，也就是说，新的日期是在运行中添加的（我应该在问题中添加这个），你会怎么做呢？这是一个与主要帖子中提出的问题大不相同的问题。我建议你为此写一篇新帖子。我刚刚发布了一个答案（受你的启发）@jacobbersi:。