canvas lijnen in 2 kleuren

Door Jan R op 01-03-2014 07:53

1.257 views

Hi,

Op basis van een artikel hier wil ik iets maken.
Ik heb een paar namen welke ik wil verbinden met een lijn in 2 kleuren.
Als ik de lijn splits op 50% lukt het. Hoe kan ik echter op 60 of 75% splitsen.


function lines(d1,d2){
	div1=document.getElementById(d1);
	div2=document.getElementById(d2);
	var canvas    = document.getElementById('canvas');
	var ctx       = canvas.getContext('2d');
	
		var x1 = parseInt(div1.dataset.x);
		var y1 = parseInt(div1.dataset.y);
		var x2 = parseInt(div2.dataset.x);
		var y2 = parseInt(div2.dataset.y);
			
		randNum = function (i) {
			return Math.round(Math.random() * i * (Math.random() > 0.5 ? -1 : 1));
		};
		
		ctx.beginPath();
		ctx.moveTo(x1, y1);
		
		ctx.lineTo( x2, y2);
		ctx.strokeStyle = 'white';
		ctx.lineWidth = 7;
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo((x1+x2)/2  , (y1+y2)/2);
		
		ctx.lineTo(x2, y2);
		ctx.strokeStyle = 'black';
		ctx.lineWidth = 7;
		ctx.stroke();
}

Jan

Wouter J

01-03-2014 09:42

Nu doe je /2 voor 50%, niet waar? Werkt *.7 voor 70% dan misschien? (niet getest)

Jan R

01-03-2014 13:56 gewijzigd op 01-03-2014 13:59

Nee. Dat is dus net het probleem :)
voorbeeldje.
http://users.telenet.be/janr/canvas.html

Dit is om te testen, dus nog niet alles ok zoals css, script en html in 1 bestand.

Ik zou het eigenlijk via routine lines willen doen met een bezierCurveTo maar dat is, voor mij toch, nog moeilijker.

Wouter J

01-03-2014 15:22 gewijzigd op 01-03-2014 15:24

Ah, denk foutje :)

Stel punt A is (2, 2) en punt B is (6, 10):

Nu wil je daar een kwart van tekenen. Als je dan van (6, 10) een kwart nemen krijg je (1.5, 2.5):

Zoals je ziet is C perfect een kwart van (0, 0) naar punt B. Maar dan is hij natuurlijk niet een kwart van A naar B.

Wat we willen is een kwart van het verschil tussen A en B. Dus (B - A) * 0.25. Dat tellen we dan vervolgens bij de coördinaten van A op, want dan ga je van A naar B met een kwart van de normale lijn van A naar B. In het voorbeeld wordt punt C dus:

Verschil:
B - A = (6, 10) - (2, 2) = (4, 8)
(4, 8) * 0.25 = (1, 2)

Punt C: A + (1, 2) = (2, 2) + (1, 2) = (3, 4)

Als we die tekenen zien we dat het klopt:

[edit]Hij klopt niet, maar de gedachte wel. Ergens een rekenfoutje gemaakt denk ik... En merk op dat bij een canvas het punt (0,0) linksboven is en niet linksonder zoals in de voorbeelden hier[/edit]

Jan R

02-03-2014 09:02

Gevonden:


ctx.beginPath();
var nProcent=30;
//xDeel=(x1+x2)/2;
//yDeel=(y1+y2)/2;
var xDeel=x1 + (x2 - x1) * nProcent/100;
var yDeel=y1 + (y2 - y1) * nProcent/100;
ctx.moveTo(xDeel  ,yDeel);				
ctx.lineTo(x2, y2);
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.stroke();

Reageren

Inloggen om te reageren