我正在编写一个小日历应用程序，目前使用 javascript 和 html5
出于某种原因，为其中一个事件绘制了一条对 Angular 线，而我认为它应该是水平的。
感谢任何帮助。
<!doctype html>
<html>
<head>
<title>Calendar</title>
</head>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script type="text/javascript">
function Event(start, end, name, text){
this.start = start;
this.end = end;
this.name = name;
this.text = text;
}
function EventCollection(){
this.events = [];
this.insert = function insert(event){
// find position for event
var pos = 0;
for(var i=0; i<this.events.length && this.events[i].start < this.events[i].start; i++)
pos = i;
// insert event
this.events.splice(pos, 0, event);
}
this.get = function get(i){
return this.events[i];
}
this.length = function length(){
return this.events.length;
}
}
var events = new EventCollection();
var currentTime = Date.now();
events.insert(new Event(currentTime + 60000, currentTime + 60000 * 5, "Meeting", ""));
events.insert(new Event(currentTime + 60000 * 2, currentTime + 60000 * 10));
function displayEvent(events, i, scale, now, BORDER){
var underlapping = 0;
for(var j=i; j>0 && events.get(j).end >= events.get(i); j++)
underlapping++;
var overlapping = 0;
for(var j=i; j<events.length() && events.get(j).start < events.get(i).end; j++){
overlapping++;
}
var LAPPING_DISTANCE = 5;
beginX = BORDER + (events.get(i).start < now.getTime() ? 0 : BORDER + scale * (events.get(i).start - now.getTime()));
beginY = canvas.height/2 - (underlapping +2)* LAPPING_DISTANCE;
context.moveTo(beginX, beginY);
endX = (BORDER + (events.get(i).end - events.get(i).start)*scale < canvas.width - BORDER ? BORDER + (events.get(i).end - events.get(i).start)*scale : canvas.width);
endY = beginY;
context.lineTo(endX, endY);
}
function displayEvents(events, scale, now, BORDER){
for(var i=0; i<events.length(); i++){
displayEvent(events, i, scale, now, BORDER);
}
}
var visibleBegin = 0;
var visibleEnd = 0;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function draw(context, canvas, events, scale){
var now = new Date();
var BORDER = 10;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, canvas.height/2);
context.lineTo(canvas.width, canvas.height/2);
// draw tickmark for now
var HALFTICKLENGTH = 10;
context.moveTo(10, canvas.height/2-HALFTICKLENGTH);
context.lineTo(10, canvas.height/2+HALFTICKLENGTH);
var hours = now.getHours();
var minutes = now.getMinutes();
context.fillText(hours + ":" + (minutes<10 ? "0" : "") + minutes, 10, canvas.height/2+20);
// draw events
displayEvents(events, 1, now);
// draw end date
context.moveTo(canvas.width - BORDER, canvas.height/2-HALFTICKLENGTH);
context.lineTo(canvas.width - BORDER, canvas.height/2+HALFTICKLENGTH);
context.strokeStyle = "#000";
context.stroke();
context.closePath();
}
draw(context, canvas, events, 1);
</script>
</body>
</html>
最佳答案
设置
var LAPPING_DISTANCE = -5;
或修复此行
beginY = canvas.height/2 - (underlapping + 2) * (-LAPPING_DISTANCE);
看起来是水平的
关于javascript - 我的代码在不应该显示的地方显示了对 Angular 线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4669979/