Статьи

Кросс-браузерный HTML5 Canvas с отступлением

Апрель 1, 2019

Canvas — это относительно новая технология HTML5, которая обеспечивает «сценарий» изображения. Вы можете добавить элемент <canvas> Он очень быстрый и может использоваться для экшн-игр и анимационных диаграмм — см. « 3 великолепных примера JavaScript и Canvas ».

Тег Canvas можно разместить на странице HTML5 с помощью следующего кода: 

 
<canvas id="mycanvas" width="300" height="300">
Sorry, your browser cannot display this image.
</canvas>

Предполагая, что холст поддерживается, JavaScript можно использовать для рисования непосредственно на холст; например, черный круг с радиусом 100 пикселей в центре изображения: 

 
var canvas = document.getElementById("mycanvas");
var cxt = canvas.getContext("2d");
cxt.arc(150,150,100,0,Math.PI*2,true);
cxt.fill();

Это здорово, но вряд ли это приятный опыт для людей, использующих браузер без поддержки <canvas>

Есть несколько проектов, которые реализуют поддержку холста в Internet Explorer 8.0 и ниже, но они не могут исправить другие браузеры. Мы можем вернуться к тексту (как показано) или к img В этой ситуации пользователь видит пустое поле.

Чтобы все были довольны, мы создадим страницу, которая показывает простую анимацию капли дождя . Если вы в Великобритании, это напомнит вам о великолепном британском лете. Статическое изображение появится, когда браузер пользователя не поддерживает <canvas>

Работая с кодом, наша HTML5- head Это ничего не добавляет к странице; это обходной путь для IE8 и ниже, который позволяет нам применять стили CSS к тегу canvasHTML5 JavaScript shiv ): 

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Canvas Example</title>
<script>
document.createElement("canvas");
</script>

Теперь мы можем определить стили CSS для нашего тега canvas Когда страница загружается, элемент получает фоновое изображение (rain.jpg), которое может видеть каждый. Объявление # mycanvas.active удаляет этот фон, но оно активируется только после успешного выполнения нашего скрипта: 

 
<style>
#mycanvas
{
	float: left;
	width: 300px;
	height: 300px;
	margin: 0 20px 0 0;
	background-image: url(rain.jpg);
	border: 1px solid #000;
}

#mycanvas.active
{
	background-image: none;
}
</style>

Теперь мы можем разместить тег canvas Нет необходимости предоставлять запасной текст, так как пользователи увидят статическое фоновое изображение, когда оно не поддерживается: 

 
</head>
<body>

<h1>HTML Canvas Example with Image Fall Back</h1>

<canvas id="mycanvas" width="300" height="300"></canvas>

Теперь мы готовы добавить немного магии JavaScript — при условии, что у пользователя включен сценарий. Первые несколько строк проверяют, поддерживается ли canvas 

 
<script>
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {

	// canvas supported
	canvas.className = "active";

Наш анимационный код дождевой капли теперь может выполняться: 

 
	// start animation
	var cxt = canvas.getContext("2d");
	cxt.fillStyle = "rgba(255,255,255,0.5)";

	setInterval(function() {
		var	x = Math.round(Math.random()*canvas.width),
			y = Math.round(Math.random()*canvas.height),
			e = 20 + Math.round(Math.random()*30),
			s = 0;

		(function() {
			s++;
			if (s <= e) {
				setTimeout(arguments.callee,s);
				var c = 255-(e-s)*3;
				cxt.strokeStyle = "rgb("+c+","+c+","+c+")";
				cxt.beginPath();
				cxt.arc(x,y,s,0,Math.PI*2,true);
				cxt.fill();
				cxt.stroke();
			}
		})();
	},100);

}
</script>

</body>
</html>

Это простая демонстрация , но она показывает, как вы можете использовать новые технологии HTML5, сохраняя при этом уровень поддержки для старых браузеров. Та же концепция может быть использована в других приложениях; например, вы могли бы предоставить анимированную диаграмму, которая возвращается к статическому, сгенерированному сервером изображению, когда холст или JavaScript недоступны.

39
Share: