简体   繁体   中英

line not displayed with canvas

I have an issue with my js code, I wanted to trace somes lines in a canvas, so I made a function named drawLine, in which you draw a line from a point (x,y) to a point (xdest,ydest). The first lines are correctly displayed but from the fourth, it doesn't work and I dont know why, do you have some ideas?

    var canvas2 = document.getElementById("canvasMid");
    var ctx = canvas2.getContext('2d');
    ctx.fillStyle = color;
    drawLine(ctx,(canvas.width/2),0,(canvas.width/2)-2,canvas.height,color, width);
    drawLine(ctx,canvas.width/2,(1/5)*canvas.height,0,0,color,width);
    drawLine(ctx,canvas.width/2,(1/6)*canvas.height,canvas.width,0,color,width);
    //start of the code which doesn't work
      drawLine(ctx,canvas.width/2,0.5*canvas.height,0,canvas.height,color,width);
      console.log(canvas.width,canvas.height)
      drawLine(ctx,canvas.width/2,(3/4)*canvas.height,canvas.width,canvas.height,color,width);
    //end 


}

function drawLine(ctx,x,y,xdest,ydest,color,width){
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(xdest,ydest);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
    ctx.closePath();
}

1st line in the center;2nd line on the left;3rd line on the right

Could you be more specific?

Like adding some images of what does excite and mark the code that seems to be in a problem...

Thanks a lot;)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM