画布，绘制线段 [英] Canvas, drawing a line segment

问题描述

我的三角法比较弱，因此我不知道如何绘制比全线起点和终点短的线段。

My trigonometry is more than weak, and therefore I do not know how to draw a line segment shorter than full lines start point and end point.

http://jsfiddle.net/psycketom/TUyJb/

我试过的是，从起点减去目标点的一部分，但它导致一个错误的线。

What I have tried, is, subtract from start point a fraction of target point, but it results in a wrong line.

/* 
 * this is an excerpt from fiddle, that shows
 * the actual calculation functions I have implemented
 */
var target = {
    x : width / 2 + 60,
    y : 20
};

var start = {
    x : width / 2,
    y : height
};

var current = {
    x : 0,
    y : 0
};

var growth = 0.5;

current.x = start.x - (target.x * growth);
current.y = start.y - (target.y * growth);

我的赌注是，我必须使用sin / cos或其他从三角分支得到它对。

My bet is that I have to use sin / cos or something else from the trigonometry branch to get it right. But, since my trigonometry is not even rusty, but weak in general, I'm stuck.

如何绘制一条适当的目标线？

How do I draw a proper line to target?

推荐答案

如果我正确理解你，那么这应该给你你想要什么：

If I understand you correctly, then this should give you what you're looking for:

current.x = start.x + (target.x - start.x) * growth;
current.y = start.y + (target.y - start.y) * growth;

这篇关于画布，绘制线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！