Отрисовка полос в канвас

ObjectOne > JavaScript > Отрисовка полос в канвас

Отрисовка полос в канвас

Для чего этот скрипт? Ну наверно что бы картины рисовать, капли стекающей «краски» по холсту с интервалом 20 милисекунд. Но скорее для того что бы не забывать про такой интересный инструмент как канвас, он же холст.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Отрисовка полосок в канвас</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<p>Левая колонка</p>
			</div>
		<div class="col-md-8">
		<p id="myDiv"></p>
		<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

//изменяя эти значения мы передвигаемя по канвасу
var num = 10;
var num2 = 50;

function fun(){

	if(num == 200){
		num2 += 1; //изменение данного значения даст новые узоры например поставьте 3
		num -= 199;
		//Когда набираеться 200 точек переходим на новый столбец
	}else{
		num += 1;
	}

	var theCanvas = document.getElementById('myCanvas'), //объявляем холст и контекст, не забываем, мы рисуем в 2d
	c = theCanvas.getContext("2d"),
	x = num2, y = num, width = 1, height = 1;


	// c.fillRect(x,y,width, height);
	c.lineTo(num2,num);
	c.stroke();

	document.getElementById('myDiv').innerHTML = num;
}


setInterval(fun,10);
</script>
		</div>
			<div class="col-md-2">
				<p>Правая колонка</p>
			</div>
		</div>
	</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Отрисовка полосок в канвас</title>

</head>

<body>

<p>Левая колонка</p>

</div>

Your browser does not support the HTML5 canvas tag.</canvas>

//изменяя эти значения мы передвигаемя по канвасу

var num = 10;

var num2 = 50;

function fun(){

if(num == 200){

num2 += 1; //изменение данного значения даст новые узоры например поставьте 3

num -= 199;

//Когда набираеться 200 точек переходим на новый столбец

}else{

num += 1;

}

var theCanvas = document.getElementById('myCanvas'), //объявляем холст и контекст, не забываем, мы рисуем в 2d

c = theCanvas.getContext("2d"),

x = num2, y = num, width = 1, height = 1;

// c.fillRect(x,y,width, height);

c.lineTo(num2,num);

c.stroke();

document.getElementById('myDiv').innerHTML = num;

}

setInterval(fun,10);

</script>

</div>

<p>Правая колонка</p>

</div>

</body>

</html>

Посмотреть пример

Количество просмотров: 655

| Категория: JavaScript
| Тэги: canvas

« sublime text проверка орфографии Эффекты @keyframes boxshadow »