Zielony Smok

HTML5 canvas – tutorial

Arrow (strzałka)

Użyty został Skrypt arrow.js.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

/**
 * Tworzy obiekt typu Arrow
 *
 * @param endX float - współrzędna x tylnego końca strzałki
 * @param endY float - współrzędna y tylnego końca strzałki
 * @param arrowLength float - długość strzałki
 * @param arrowWidth float - grubość strzałki
 * @param arrowAngle float - kąt pod którym jest skierowana strzałka - 
 * kąty podawane są w stopniach, kat zerowy to położenie godziny 3.00, 
 * katy wzrastają w kierunku przeciwnym do wskazówek zegara
 * @param brudLength float - długość grota mierzona wzdłuż osi strzałki
 * @param brudAngle float - kąt między osią strzałki a brzegiem grota
 * @param close boolean -  true - grot bez wcięcia, false - grot z wcięciem
 */
function drawArrow(endX, endY, arrowLength, arrowWidth, arrowAngle, 
    brudLength,	brudAngle, close) {
	this.endX = endX;
	this.endY = endY;
	this.arrowLength = arrowLength;
	this.arrowAngle = arrowAngle;
	this.brudLength = brudLength;
	this.brudAngle = brudAngle;
	this.close = close;
	var cosa = Math.cos(degToRad(arrowAngle));
	var sina = Math.sin(degToRad(arrowAngle));
	var half = arrowWidth / 2.0;
	var cosah = cosa * half;
	var sinah = sina * half;
	var startX = endX + arrowLength * 
            Math.cos(degToRad(-arrowAngle));
	var startY = endY + arrowLength * 
            Math.sin(degToRad(-arrowAngle));
	var middleX = endX + (arrowLength - brudLength)
			* Math.cos(degToRad(-arrowAngle));// x7
	var middleY = endY + (arrowLength - brudLength)
			* Math.sin(degToRad(-arrowAngle));// y7
	var cosb = Math.cos(degToRad(brudAngle));
	var sinb = Math.sin(degToRad(brudAngle));
	var w2 = half * cosb / sinb;
	var mmiddleX = endX + (arrowLength - w2) * 
             Math.cos(degToRad(-arrowAngle));//
	var mmiddleY = endY + (arrowLength - w2) * 
             Math.sin(degToRad(-arrowAngle));//
	var w3 = brudLength - w2;
	var w4 = w3 * sinb / cosb;
	var w5 = w4 + half;
	// -
	var x1 = endX - sinah;
	var y1 = endY - cosah;
	var x2 = endX + sinah;
	var y2 = endY + cosah;
	var x5 = middleX + sinah;
	var y5 = middleY + cosah;
	var x6 = middleX - sinah;
	var y6 = middleY - cosah;
	var x8 = mmiddleX + sinah;
	var y8 = mmiddleY + cosah;
	var x9 = mmiddleX - sinah;
	var y9 = mmiddleY - cosah;
	var x10 = middleX + sina * w5;
	var y10 = middleY + cosa * w5;
	var x11 = middleX - sina * w5;
	var y11 = middleY - cosa * w5;
	ctx.save();
	ctx.beginPath();
	if (this.close) {
		ctx.moveTo(x1, y1);
		ctx.lineTo(x2, y2);
		ctx.lineTo(x5, y5);
		ctx.lineTo(x10, y10);
		ctx.lineTo(x8, y8);
		ctx.lineTo(startX, startY);
		ctx.lineTo(x9, y9);
		ctx.lineTo(x11, y11);
		ctx.lineTo(x6, y6);
		ctx.closePath();
	} else {
		ctx.moveTo(x11, y11);
		ctx.lineTo(x9, y9);
		ctx.moveTo(x10, y10);
		ctx.lineTo(x8, y8);
		ctx.moveTo(x1, y1);
		ctx.lineTo(x2, y2);
		ctx.lineTo(x8, y8);
		ctx.lineTo(startX, startY);
		ctx.lineTo(x9, y9);
		ctx.closePath();
	}
	ctx.restore();
};
/*
 * funkcja zamienia stopnie na radiany
 */
// k¹t deg podajemy w stopniach
var degToRad = function(deg) {
	return Math.PI * deg / 180.0;
};
/*
 * funkcja zamienia radiany na stopnie k¹t rad podajemy w radianach
 */
var radToDeg = function(rad) {
	return rad * 180.0 / Math.PI;
};
var arrowLength = function(x1, y1, x2, y2) {
	var distance = 0.0;
	var x3 = x1 - x2;
	var y3 = y1 - y2;
	distance = Math.sqrt(x3 * x3 + y3 * y3);
	return distance;
};
var atan2Deg = function(yy, xx) {
	return Math.atan2(yy, xx) * 180.0 / Math.PI;
};
var arrowAngle = function(x1, y1, x2, y2) {
	var x3 = x1 - x2;
	var y3 = y1 - y2;
	return atan2Deg(x3, y3);
};
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
//-
ctx.lineWidth=5;
ctx.fillStyle="red";
ctx.strokeStyle="black";
drawArrow(100, 100, 200, 30, 25, 75, 25, false);
ctx.fill();
ctx.stroke();
//-
ctx.lineWidth=5;
ctx.fillStyle="magenta";
ctx.strokeStyle="magenta";
drawArrow(300, 100, 200, 30, 25, 75, 25, true);
ctx.fill();
ctx.stroke();
//-
ctx.fillStyle="blue";
drawArrow(100, 200, 100, 2, 35, 15, 15, true);
ctx.fill();
//-
ctx.fillStyle="orange";
drawArrow(250, 150, 100, 2, 235, 50, 5, true);
ctx.fill();
//-
ctx.fillStyle="cyan";
ctx.lineWidth = 8;
ctx.strokeStyle ="black";
ctx.lineCap="square";
ctx.lineJoin="round";
drawArrow(450, 150, 200, 50, 190, 65, 15, false);
ctx.fill();
ctx.stroke();