Как это тикает: Основы рисования в Javascript с помощью Canvas

технологии, canvas, javascript

- суббота, сентября 05, 2009 - 0 коммент.

Основы рисования в Javascript с помощью Canvas

...особой возможности html – тегу canvas. Этот тег необычен тем, что не управляет параметрами визуализации текста, как, например, “это слово будет выделено курсивом”, а дает возможность нарисовать на странице любое изображение используя команды javascript. (с) Про тег html canvas - 1

Далее... Особо не разбирался с canvas... написал первую программу "Летающий туда-сюда шарик"... работает в IE благодаря excanvas... интересно... ниже приведен исходный код.

<html>
<head>
<style>
#cv {
	border:1px solid #a9a9a9;
}
</style>
<script src="excanvas.compiled.js"></script>
<script>
function Bounce()
{
	this.xCtx 		= document.getElementById("cv").getContext("2d");
	
	this.iDiameter 	= 5;
	
	this.iInterval	= 5;
	
	this.iX			= 10
	
	this.iY			= 10;
	
	this.iDX		= 2;
	
	this.iDY		= 4;
	
	this.iWidth		= 400;
	
	this.iHeight	= 300;
	
	this.circle = function()
	{
		this.xCtx.beginPath();
		this.xCtx.arc(iX, iY, this.iDiameter, 0, Math.PI*2, true);
		this.xCtx.closePath();
		this.xCtx.fill();
	}
	
	this.draw = function(iX, iY)
	{
		this.clear();
		this.circle();
		if ((this.iX + this.iDX > this.iWidth) || (this.iX + this.iDX < 0)) {
			this.iDX = -this.iDX;
		}
		
		if ((this.iY + this.iDY > this.iHeight) || (this.iY + this.iDY < 0)) {
			this.iDY = -this.iDY;
		}

this.iX += this.iDX;
		this.iY += this.iDY;	
	}
	
	this.clear = function()
	{
		this.xCtx.clearRect(0, 0, this.iWidth, this.iHeight);
	}
	
	this.Bounce = function() {

this.draw(this.iX, this.iY);	
	}

this.xCtx.canvas.width 	= this.iWidth;
	this.xCtx.canvas.height = this.iHeight;
	setInterval(function() {
		this.Bounce();
	}, this.iInterval);
}

</script>
</head>
<body onload="new Bounce();">
<canvas id="cv"></canvas>
</body>
</html>

ССЫЛКИ: Canvas tutorial Про тег html canvas - 1 Про тег html canvas - 2

Как это тикает

технологии, canvas, javascript

- суббота, сентября 05, 2009 - 0 коммент.

Основы рисования в Javascript с помощью Canvas

0 Responses to "Основы рисования в Javascript с помощью Canvas"

Отправить комментарий

Реклама