Fatal编程技术网
  • javascript/
  • Javascript 我的代码显示了一个对角线，它不应该'；T

Javascript 我的代码显示了一个对角线，它不应该'；T

javascript html graphics canvas

Javascript 我的代码显示了一个对角线，它不应该'；T,javascript,html,graphics,canvas,Javascript,Html,Graphics,Canvas,我正在用javascript和html5编写一个小日历应用程序 出于某种原因，其中一个事件有一条对角线，而我认为它应该是水平的 感谢您的帮助 <!doctype html> <html> <head> <title>Calendar</title> </head> <body> <canvas id="canvas" width="700" heig

我正在用javascript和html5编写一个小日历应用程序

出于某种原因，其中一个事件有一条对角线，而我认为它应该是水平的

感谢您的帮助

<!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>


历法
函数事件（开始、结束、名称、文本）{
this.start=start；
this.end=end；
this.name=名称；
this.text=文本；
}
函数EventCollection（）{
this.events=[]；
this.insert=函数插入（事件）{
//查找事件的位置
var-pos=0；
对于（var i=0；i0&&events.get（j）.end>=events.get（i）；j++）
底层应用++；
var重叠=0；
对于（var j=i；j设置


var LAPPING_DISTANCE = -5;


还是修这条线


beginY = canvas.height/2 - (underlapping + 2) * (-LAPPING_DISTANCE);


似乎是水平设置


var LAPPING_DISTANCE = -5;


还是修这条线


beginY = canvas.height/2 - (underlapping + 2) * (-LAPPING_DISTANCE);



似乎是水平的
您有一个不匹配的
context.beginPath（）
/
context.stroke（）
对。快速看一眼，我会说这是在您从
draw
函数调用
displayEvents
时发生的。
您有一个不匹配的
context.beginPath（）
/
context.stroke（）
pair。快速看一眼，我会说这是在从
draw
函数调用
displayEvents
时发生的。
那么我应该有一个context.beginPath（）；…；context.closePath（）；context.stroke（）；对于我画的每件东西，我应该有一个context.beginPath（）；…；context.closePath（）；context.stroke（）；对于我画的每一件东西？我不知道为什么，但这解决了它。谢谢！不客气。它改变了上下文。移动到Y偏移。使用负重叠距离，偏移似乎是错误的。我不知道为什么，但这解决了它。谢谢！不客气。它改变了上下文。移动到Y偏移。使用负重叠距离，偏移似乎是错误的。