我需要几个月前的滚动条，但我需要在右侧带有名称的矩形以保持可见

分类：编程问答

如何解决我需要几个月前的滚动条，但我需要在右侧带有名称的矩形以保持可见

我希望在几个月前显示滚动条，但我也希望始终显示右侧的名称。 我只想在主框中滚动。我只希望在屏幕的同一位置显示右侧。这是给我实习的没有一个客户的名字是真实的，所以我希望没有信息泄露。 有人可以帮我吗？

var canvas = document.querySelector('canvas');

canvas.width = 4000;
canvas.height = 2000;

var c = canvas.getContext('2d');

function display_client_in_canvas(item,index){
    console.log(index);
}

var clientArray = {
    1122: {
        'name':'Harry Potter','id':1122,'startdate':1567980000,'enddate':1598824800
    },11522: {
        'name': 'Harry Pothead','id': 11522,'startdate': 1567580000,'enddate': 1568824800
    },122: {
        'name': 'Piet Klaas','id': 122,'startdate': 1567987000,'enddate': 1598824900
    },12452: {
        'name': 'Jan Klaas','id': 12452,'startdate': 1567947000,'enddate': 1598821900
    },19452: {
        'name': 'Piet Jan','id': 19452,'startdate': 1567917000,'enddate': 1598824100
    },1123: {
        'name':'Parry Hotter',11523: {
        'name': 'Harry Knothead',123: {
        'name': 'Piet Dwaas',12453: {
        'name': 'Jan Dwaas',19453: {
        'name': 'Piet Pan',1124: {
        'name':'Parry Potter',11524: {
        'name': 'Barry Pothead',124: {
        'name': 'Piet Blaas',12454: {
        'name': 'Jan Blaas','enddate': 1598821900
    }
};


// Line
// Box
c.beginPath();
c.moveTo(50,100);
c.lineTo(1610,1500);
c.lineTo(50,100);
c.strokeStyle = "black";
c.stroke();

// Line left in the box
c.beginPath();
c.moveTo(150,100);
c.lineTo(150,1500);
c.strokeStyle = "black";
c.stroke();

// Line above
// Coloring the Months
c.beginPath();
c.fillStyle = "white";
c.fillRect(151,100,124,1399);
c.fillStyle = "#e7e7c7";
c.fillRect(274,111,1399);
c.fillStyle = "white";
c.fillRect(386,1399);
c.fillStyle = "#e7e7c7";
c.fillRect(510,122,1399);
c.fillStyle = "white";
c.fillRect(630,1399);
c.fillStyle = "#e7e7c7";
c.fillRect(754,1399);
c.fillStyle = "white";
c.fillRect(874,1399);
c.fillStyle = "#e7e7c7";
c.fillRect(998,1399);
c.fillStyle = "white";
c.fillRect(1122,1399);
c.fillStyle = "#e7e7c7";
c.fillRect(1242,1399);
c.fillStyle = "white";
c.fillRect(1366,1399);
c.fillStyle = "#e7e7c7";
c.fillRect(1486,1399);


var randXstart,randY,randXend,randXdashB,randXdashE;

// First line
randXstart = (Math.random() * 450) + 150;
randXend = randXstart + 800;
//if(randXstart > randXend) {
  //  var x = randXstart;
 //   randXstart = randXend;
 //   randXend = x;
//}
randY = 150;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,randY);
c.lineTo(randXend,randY);
c.stroke();


randY =  160;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,140);
c.lineTo(randXstart,randY);
c.stroke();


randY =  140;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXend,160);
c.lineTo(randXend,randY);
c.stroke();

// Second line
randY = 250;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,randY);
c.stroke();


randY =  260;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,240);
c.lineTo(randXstart,randY);
c.stroke();


randY =  260;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXend,240);
c.stroke();

// Third line
randY = 350;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,randY);
c.stroke();


randY =  360;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,340);
c.lineTo(randXstart,randY);
c.stroke();


randY =  360;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXend,340);
c.stroke();

// Fourth line
randY = 450;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,randY);
c.stroke();


randY =  460;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,440);
c.lineTo(randXstart,randY);
c.stroke();


randY =  460;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXend,440);
c.stroke();

// Fifth line
randY = 550;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,randY);
c.stroke();


randY =  560;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXstart,540);
c.lineTo(randXstart,randY);
c.stroke();


randY =  560;
c.beginPath();
c.strokeStyle = "red";
c.moveTo(randXend,540);
c.stroke();

// Names clients
var first_timeline_y_pos = 150;
var vertical_space_per_timeline = 100;

function add_name_to_timeline(c,name,y_pos) {
    c.beginPath();
    c.fillStyle = 'black';
    c.font = "12px Arial";
    c.fillText(name,64,y_pos);
    c.stroke();
}
var i = 0;
for (var client in clientArray) {
    var client_data = clientArray [client];
    var y_pos = first_timeline_y_pos + vertical_space_per_timeline * i;
    add_name_to_timeline(c,client_data['name'],y_pos);
    i++;

    var s = new Date(client_data['startdate'] * 1000).toLocaleDateString("nl-NL");
    console.log(s);
    var d = new Date(client_data['enddate'] * 1000).toLocaleDateString("nl-NL");
    console.log(d);
}

// Box above Box
c.beginPath();
c.moveTo(50,20);
c.lineTo(1610,20);
c.strokeStyle = "black";
c.stroke();

c.beginPath();
c.moveTo(50,20);
c.lineTo(50,100);
c.strokeStyle = "black";
c.stroke();

c.beginPath();
c.moveTo(150,20);
c.lineTo(150,100);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Maanden",60,55);
c.font = "20px Arial";
c.fillText("2020",76,78);
c.stroke();

// January
c.beginPath();
c.moveTo(274,20);
c.lineTo(274,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Jan",196,65);
c.stroke();


// February
c.beginPath();
c.moveTo(386,20);
c.lineTo(386,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Feb",312,65);
c.stroke();

// March
c.beginPath();
c.moveTo(510,20);
c.lineTo(510,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Mar",430,65);
c.stroke();

// April
c.beginPath();
c.moveTo(630,20);
c.lineTo(630,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Apr",554,65);
c.stroke();

// May
c.beginPath();
c.moveTo(754,20);
c.lineTo(754,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Mei",674,65);
c.stroke();

// June
c.beginPath();
c.moveTo(874,20);
c.lineTo(874,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Jun",796,65);
c.stroke();

// July
c.beginPath();
c.moveTo(998,20);
c.lineTo(998,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Jul",924,65);
c.stroke();

// August
c.beginPath();
c.moveTo(1122,20);
c.lineTo(1122,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Aug",1042,65);
c.stroke();

// September
c.beginPath();
c.moveTo(1242,20);
c.lineTo(1242,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Sep",1164,65);
c.stroke();

// October
c.beginPath();
c.moveTo(1366,20);
c.lineTo(1366,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Okt",1288,65);
c.stroke();

// November
c.beginPath();
c.moveTo(1486,20);
c.lineTo(1486,1500);
c.strokeStyle = "black";
c.font = "20px Arial";
c.fillText("Nov",1408,65);
c.stroke();

// December
c.beginPath();
c.moveTo(1610,1500);
c.font = "20px Arial";
c.fillText("Dec",1528,65);
c.stroke();


// Dashed lines
// First
randXdashB = randXend + 5;
randXdashE = (randXdashB + 200);
randY = 150;
c.beginPath();
c.strokeStyle = "red";
c.setLineDash([5,5]);
c.moveTo(randXdashB,randY);
c.lineTo(randXdashE,randY);
c.stroke();

randY =  160;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashB,140);
c.lineTo(randXdashB,randY);
c.stroke();


randY =  140;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashE,160);
c.lineTo(randXdashE,randY);
c.stroke();

// Second line
randXdashB = randXend + 5;
randXdashE = (randXdashB + 200);
randY = 250;
c.beginPath();
c.strokeStyle = "red";
c.setLineDash([5,randY);
c.stroke();

randY =  260;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashB,240);
c.lineTo(randXdashB,randY);
c.stroke();


randY =  240;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashE,260);
c.lineTo(randXdashE,randY);
c.stroke();

//Third line
randXdashB = randXend + 5;
randXdashE = (randXdashB + 200);
randY = 350;
c.beginPath();
c.strokeStyle = "red";
c.setLineDash([5,randY);
c.stroke();

randY =  360;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashB,340);
c.lineTo(randXdashB,randY);
c.stroke();


randY =  340;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashE,360);
c.lineTo(randXdashE,randY);
c.stroke();

//Fourth line
randXdashB = randXend + 5;
randXdashE = (randXdashB + 200);
randY = 450;
c.beginPath();
c.strokeStyle = "red";
c.setLineDash([5,randY);
c.stroke();

randY =  460;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashB,440);
c.lineTo(randXdashB,randY);
c.stroke();


randY =  440;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashE,460);
c.lineTo(randXdashE,randY);
c.stroke();

//Fifth line
randXdashB = randXend + 5;
randXdashE = (randXdashB + 200);
randY = 550;
c.beginPath();
c.strokeStyle = "red";
c.setLineDash([5,randY);
c.stroke();

randY =  560;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashB,540);
c.lineTo(randXdashB,randY);
c.stroke();


randY =  540;
c.beginPath();
c.setLineDash([]);
c.strokeStyle = "red";
c.moveTo(randXdashE,560);
c.lineTo(randXdashE,randY);
c.stroke();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TimeLine</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
    html,body
    {
        width:100%;
        height:100%;
        margin:0;

    }
    #parent {
        width:4000px;
        height:1000px;
        border:1px solid #000;
        overflow-x:scroll;
    }
    .canvas {
        width:auto;
        height:auto;
    }
</style>
<div id="parent">
    <canvas id="canvas" class="canvas" width="2500" height="3500">
    </canvas>
</div>
<script src="Opdracht2.js"></script>

<script>



</script>
</body>
</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
VM VirtualBox中安装centos时报错：设置基础软件仓库时出错
参考1 参考2 解决方案 # 点击安装源 协议选择 http:// 路径填写 mirrors.aliyun.com/centos/8.3.2011/BaseOS/x86_64/os URL类型 软件库URL 其他路径 # 版本 7 mirrors.aliyun.com/centos/7/os/x86
kafka常见问题
报错1 [root@slave1 data_mocker]# kafka-console-consumer.sh --bootstrap-server slave1:9092 --topic topic_db [2023-12-19 18:31:12,770] WARN [Consumer clie
hive常见问题
错误1 # 重写数据 hive (edu)&gt; insert overwrite table dwd_trade_cart_add_inc &gt; select data.id, &gt; data.user_id, &gt; data.course_id, &gt; date_format(
装载数据时报错：Failed to execute spark task, with exception 'org.apache.hadoop.hive.ql.metadata.HiveException(Failed to create spark client.)'
错误1 hive (edu)&gt; insert into huanhuan values(1,&#39;haoge&#39;); Query ID = root_20240110071417_fe1517ad-3607-41f4-bdcf-d00b98ac443e Total jobs = 1
flume常见问题
报错1：执行到如下就不执行了，没有显示Successfully registered new MBean. [root@slave1 bin]# /usr/local/software/flume-1.9.0/bin/flume-ng agent -n a1 -c /usr/local/softwa
hadoop集群常见错误
虚拟及没有启动任何服务器查看jps会显示jps，如果没有显示任何东西 [root@slave2 ~]# jps 9647 Jps 解决方案 # 进入/tmp查看 [root@slave1 dfs]# cd /tmp [root@slave1 tmp]# ll 总用量 48 drwxr-xr-x. 2
hive常见错误
报错1 hive&gt; show databases; OK Failed with exception java.io.IOException:java.lang.RuntimeException: Error in configuring object Time taken: 0.474 se
Linux常见错误
报错1 [root@localhost ~]# vim -bash: vim: 未找到命令 安装vim yum -y install vim* # 查看是否安装成功 [root@hadoop01 hadoop]# rpm -qa |grep vim vim-X11-7.4.629-8.el7_9.x
使用sqoop一直卡在：mapreduce.Job: Running job: job_1703173956074_0001
修改hadoop配置 vi /usr/local/software/hadoop-2.9.2/etc/hadoop/yarn-site.xml # 添加如下 &lt;configuration&gt; &lt;property&gt; &lt;name&gt;yarn.nodemanager.res
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot