Do działania prezentowanego kodu potrzebny jest skrypt ‘koniunkcje.js’, który możesz zaleźć tutaj.


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


Listing

var $ = function(id) {
	return document.getElementById(id);
};		
var cv;
var ctx;
window.onload = function() {
	$("pokaz").onclick = pokaz;				
	cv = document.getElementById('canvas');
	ctx = cv.getContext('2d');
	//plansza
	var plansza = document.getElementById("plansza");
	ctx.drawImage(plansza, 25, 25, 402, 402);
	//ziemia
	var ziemia = document.getElementById("ziemia");
	//ctx.globalCompositeOperation = "source-over";
	ctx.drawImage(ziemia, 10, 200, 30, 30);
	//wenus
	var wenus = document.getElementById("wenus");
	//ctx.globalCompositeOperation = "source-atop";
	ctx.drawImage(wenus, 54, 202, 24, 24);

};

Skrypt koniunkcje.js

var CENTER_X = 226;
var CENTER_Y = 226;
var angleZ = degToRad(180.0);
var angleChangeZ = -3.0;
var angleW = degToRad(180.0);
var angleChangeW = angleChangeZ * 1.625;
var jedynka = false;
var dwojka = false;
var trojka = false;
var czworka = false;
var piatka = false;
var szostka = false;
var bool = true;
var timer;
var pokaz = function() {
	if(bool){
		bool = false;
		$("pokaz").value = 'Stop';		
		timer = setInterval("drawFrame()", 20);
		angleZ = degToRad(180.0);
		angleW = degToRad(180.0);
		eraseDigits();
	}
	else{
		bool = true;
		$("pokaz").value = 'Start';		
		clearInterval(timer);
	}
};
function setDigits(digit) {
	switch (digit) {
	case 6:
		szostka = true;
	case 5:
		piatka = true;
	case 4:
		czworka = true;
	case 3:
		trojka = true;
	case 2:
		dwojka = true;
	case 1:
		jedynka = true;
		drawDigits();
		break;
	}
};
function eraseDigits() {
	szostka = false;
	piatka = false;
	czworka = false;
	trojka = false;
	dwojka = false;
	jedynka = false;
	drawDigits();
};
function drawDigits() {
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = "red";
	ctx.strokeStyle="red";
	ctx.lineWidth = 1;
	if (jedynka) {
		ctx.fillText("1", 60, 228);//
	}
	if (dwojka) {
		ctx.fillText("2", 365, 150);//
		ctx.moveTo(70, 223);
		ctx.lineTo(360, 149);//
	}
	if (trojka) {
		ctx.fillText("3", 164, 385);//
		ctx.moveTo(360, 149);
		ctx.lineTo(168, 370);//
	}
	if (czworka) {
		ctx.fillText("4", 200, 68);//
		ctx.moveTo(168, 370);
		ctx.lineTo(206, 72);//
	}
	if (piatka) {
		ctx.fillText("5", 342, 345);
		ctx.moveTo(206, 72);
		ctx.lineTo(340, 333);//
	}
	if (szostka) {
		ctx.fillText("6", 60, 213);//
		ctx.moveTo(340, 333);
		ctx.lineTo(71, 210);//
	}
	ctx.fill();
	ctx.stroke();
	ctx.restore();
};
function degToRad(deg) {
	return Math.PI * deg / 180.0;
};
function radToDeg(rad) {
	return rad * 180.0 / Math.PI;
};
function drawFrame() {
	ctx.clearRect(0,0,cv.width,cv.height);
	ctx.drawImage(plansza, 25, 25, 402, 402);
	var xz = CENTER_X + (Math.cos(angleZ) * 200);
	var yz = CENTER_Y + (Math.sin(angleZ) * 200);
	ctx.drawImage(ziemia, xz - 15, yz - 15, 30, 30);	
	angleZ += degToRad(angleChangeZ);
	//-
	var xw = CENTER_X + (Math.cos(angleW) * 158);
	var yw = CENTER_Y + (Math.sin(angleW) * 158);
	ctx.drawImage(wenus, xw - 12, yw - 12, 24, 24);
	
	angleW += degToRad(angleChangeW);
	if(radToDeg(angleZ) <= -2710){
		
		clearInterval(timer);
		bool = true;		
	}
	if(radToDeg(angleZ) <= -2700){
		setDigits(6);
	}
	if(radToDeg(angleZ) <= -2124){
		setDigits(5);
	}
	if(radToDeg(angleZ) <= -1548){
		setDigits(4);
	}
	if(radToDeg(angleZ) <= -972){
		setDigits(3);
	}
	if(radToDeg(angleZ) <= -396){
		setDigits(2);
	}
	if(radToDeg(angleZ) < 180){
		setDigits(1);
	}	
};

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *