canvas入门_Canvas元素入门

canvas入门

There’s a lot of really exciting and interesting features arriving just around the corner in the world of web development. One of the new features that is receiving a lot of attention, and for good reason, is the new canvas element. The canvas element offers a lot of power to web developers, but can take a bit for some people to get comfortable with. So, I’m going to run a series of posts introducing this powerful new feature, and showing some of the ways it can be utilized.

Web开发的世界中有许多真正令人兴奋和有趣的功能。 新的画布元素是引起人们广泛关注的新功能之一，这是有充分理由的。 canvas元素为Web开发人员提供了强大的功能，但有些人可能需要一些时间来适应它。 因此，我将撰写一系列文章，介绍这一强大的新功能，并展示一些可利用的功能。

它是什么，谁支持它？ (What Is It, and Who Supports It?)

The canvas element was originally implemented in Safari, and then became standardized in the HTML5 specification. The element allows developers to dynamically draw onto a blank ‘canvas’ in a website. Thankfully, you don’t have to wait to play around with this element. Currently, you can find support for it in Firefox (version 1.5 and newer), Safari, or Opera (version 9 and newer). In addition, you can twist IE’s arm a bit thanks to Google and Mozilla. Google has created ExplorerCanvas, a script that allows your canvas scripts to work in IE. For more intensive applications, Mozilla created has created an ActiveX plugin for IE to bring canvas support to the widely used browser. So, there’s little reason why you can’t start using it today….Google Maps does!

canvas元素最初是在Safari中实现的，然后在HTML5规范中变得标准化。 该元素使开发人员可以在网站上动态绘制空白的“画布”。 值得庆幸的是，您不必等待这个元素。 当前，您可以在Firefox(1.5版及更高版本)，Safari或Opera(9版及更高版本)中找到对此的支持。 此外，借助Google和Mozilla，您可以稍微改变IE的手臂。 Google创建了ExplorerCanvas ，该脚本允许您的画布脚本在IE中运行。 对于更密集的应用程序，Mozilla创建了针对IE的ActiveX插件 ，以将画布支持扩展到广泛使用的浏览器。 因此，几乎没有理由为什么您今天不能开始使用它。GoogleMaps可以使用！

Unfortunately, there is some discrepancy in the way browsers support the canvas element right now. For example, in Safari, the canvas tag works a lot like the img tag…it doesn’t require a closing tag. In Safari, you can close the element like so:

不幸的是，现在浏览器支持canvas元素的方式存在一些差异。 例如，在Safari中，canvas标签的工作方式与img标签非常相似……它不需要结束标签。 在Safari中，您可以像这样关闭元素：

In Firefox, however, the canvas element requires a closing tag:

但是，在Firefox中，canvas元素需要一个结束标记：

The problem comes in with alternate content. In Firefox, we can simply throw our alternate content in between the opening and closing canvas tags. If the browser doesn’t support the canvas element, then the alternate content displays. In Safari, the content displays regardless. There are a few ways you can hack around this however, including this one presented by Matt Snider.

问题来自备用内容。 在Firefox中，我们可以简单地将替代内容放在开始和结束画布标签之间。 如果浏览器不支持canvas元素，则显示备用内容。 在Safari中，无论显示内容如何。 但是，您可以通过几种方法解决此问题，包括Matt Snider提出的方法。

为什么很酷 (Why It’s Cool)

The canvas element is not meant for static images…though it can certainly be used to do that. The real power of it comes when we make use of Javascript to manipulate the canvas element and create dynamic visualizations like data charts and graphs, interactive diagrams and games. In fact, there are a couple impressive Javascript game recreations that have already been developed that make use of the canvas element. You can already play Mario Kart, Super Mario, and an incredibly addicting game called Ooze.

canvas元素不是用于静态图像的……虽然可以肯定地使用它。 当我们利用Javascript操作画布元素并创建动态可视化效果(如数据图表和图形，交互式图表和游戏)时，它的真正威力就来了。 实际上，已经开发了一些令人印象深刻的Javascript游戏娱乐，它们利用canvas元素。 您已经可以玩Mario Kart ， Super Mario和一款令人上瘾的游戏，称为Ooze 。

The canvas element is a great example of where implementation precedes standardization. Safari implemented it, then Firefox and Opera caught on, and now the WHAT-WG is incorporating it into the HTML5 specification. Once implemented, it provides us with a standardized, cross-browser means to dynamically display data and react to user events in a way that previously required Flash.

canvas元素是实现在标准化之前的一个很好的例子。 Safari实施了它，然后Firefox和Opera流行了，现在WHAT-WG将其合并到HTML5规范中。 一旦实施，它将为我们提供标准化的跨浏览器方式，以动态方式显示数据并以以前需要Flash的方式对用户事件做出React。

即将发生什么 (What’s Coming Up)

Next time around, we’ll start to look at the canvas element in more detail including the attributes available. We’ll also start diving into some Javascript and some of the methods provided by the DOM to interact with the canvas element. *[WHAT-WG]: Web Hypertext Application Technology Working Group

下次，我们将开始更详细地查看canvas元素，包括可用的属性。 我们还将开始研究一些Javascript和DOM提供的一些与canvas元素进行交互的方法。 * [WHAT-WG]：Web超文本应用技术工作组

翻译自: https://timkadlec.com/2008/09/getting-started-with-the-canvas-element/

canvas入门