这篇文章给大家分享的是有关HTML5 Canvas有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司主要从事成都网站制作、成都网站建设、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务平城,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
在本教程中，我将试着讲述如何在你自己的网页中使用
开始使用之前
用元素
如上所述，并不是所有现代浏览器都支持
Let's start this tutorial by looking at the
This looks a lot like the ![]()
element, the only difference is that it doesn't have the src and alt attributes.
The id attribute isn't specific to the
The
替用内容
Because the
因为
Luckily this is very straightforward: we just provide alternative content inside the canvas element. Browsers who don't support it will ignore the element completely and render the fallback content, others will just render the canvas normally.
For instance we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:
我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：
current stock price: $3.15 +0.15
结束标签 是必须的
In the Apple Safari implementation,
在Apple Safari里，
If fallback content is not needed, a simple will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.
如果没有替用内容， 对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。
If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).
如果有替用内容，那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容，因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。
渲染上下文（Rendering Context）
The
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.
上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。
检查浏览器的支持
The fallback content is displayed in browsers which do not support
除了在那些不支持 的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单，判断 getContext 是否存在即可。
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}代码模板
Here is a minimalistic template, which we'll be using as a starting point for later examples. You can download this file to work with on your system.
我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以 下载文件 到本地备用。
Canvas tutorial
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
canvas { border: 1px solid black; }
