0
268
ViewsHow can i draw a line with canvas to specific Coordinates in display... (absolute cordinate)
i am newbie in canvas and svg. I want to make a canvas or svg line between to specific coordinates
For example i have two rectangles and i have to make a line between them (In this case i have to make this line center of two rectangles)
what i've tried: SVG codes like this:
HTML:
<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="15px" xml:space="preserve">
<path class="path2" fill="#01a09e" stroke-width="5" stroke="#01a09e" d="M0 0 l890 0"/>
</svg>
CSS:
.path2 {
stroke-dasharray: 1120;
/* stroke-dashoffset: 800; */
animation: draw1 5s linear alternate;
}
@keyframes draw1 {
from {
stroke-dashoffset: 1120;
}
to {
stroke-dashoffset: 2240;
}
}
·
Juan Pablo Isaza
1 answers
Answer question0
You can achieve this by using only canvas. I used quadraticCurveTo() to draw the curved line and rect() to draw the rectangles.
The quadraticCurveTo() needs an starting point, that's why I'm using moveTo() before drawing the line.
const canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
// Draw rectangle one ("r" stands for rectangle)
let r_x = 20,
r_y = 20,
r_width = 80,
r_height = 30;
ctx.beginPath();
ctx.rect(r_x, r_y, r_width, r_height);
// Draw curved line
let start_x = r_x + r_width*2/3,
start_y = r_y + r_height,
point_one = { x: 30, y: 130 },
point_two = { x: 120, y: 150 };
ctx.moveTo(start_x, start_y)
ctx.quadraticCurveTo(
point_one.x,
point_one.y,
point_two.x,
point_two.y
);
// Draw second rectangle
r_x = 80, r_y = 150;
ctx.rect(r_x, r_y, r_width, r_height);
ctx.stroke();<canvas width="300" height="200"></canvas>
·
Juan Pablo Isaza
Report
Answer question