后备寄存器_带有后备功能的跨浏览器HTML5画布

最新推荐文章于 2024-09-13 09:10:07 发布

dingshi7798

最新推荐文章于 2024-09-13 09:10:07 发布

阅读量72

点赞数

文章标签： js css html html5 javascript ViewUI

原文链接：https://www.sitepoint.com/html5-canvas-fallback/

版权

后备寄存器

Canvas是一种相对较新HTML5技术，可提供“可编写脚本”的图像。您可以在页面上添加<canvas>元素，并使用JavaScript命令在其表面上绘制。它非常快，可用于动作游戏和动画图表-请参阅“ 3个很棒JavaScript和Canvas示例” 。

可以使用以下代码将画布标签放置在HTML5页面上：

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

假设支持画布，则可以使用JavaScript直接在画布上绘制；例如，图像中心半径为100px的黑色圆圈：

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但禁用了JavaScript，则该标记不会显示。在这种情况下，用户会看到一个空框。

为了让所有人满意，我们将建立一个页面，显示一个简单的画布雨滴动画。如果您在英国，这会让您想起英国光荣的夏天。当用户的浏览器不支持<canvas>或JavaScript时，将显示静态图像。

通过这段代码，我们HTML5 head包含一个声明了canvas元素的小脚本。这不会为页面增加任何内容。这是IE8及以下版本的一种解决方法，即使浏览器不支持HTML5，我们也可以将CSS样式应用于canvas标签（或者，我们可以使用HTML5 JavaScript shiv ）：

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

现在，我们可以为canvas标签定义CSS样式。页面加载时，将为元素提供所有人都可以看到的背景图像（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不可用时，该图表可以退回到服务器生成的静态图像。