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）
<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context, which is the only currently defined rendering context. In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will be added.
<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（rendering context），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的 3D 上下文。
The <canvas> is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.
<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。
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>; scripts can also check for support when they execute. This can easily be done by testing for the getContext method. Our code snippet from above becomes something like this:
除了在那些不支持 的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 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.
我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始，你可以 下载文件 到本地备用。
<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html>If you look at the script you'll see I've made a function called draw, which will get executed once the page finishes loading (via the onload attribute on the body tag). This function could also have been called from a setTimeout, setInterval, or any other event handler function just as long the page has been loaded first.
细心的你会发现我准备了一个名为 draw 的函数，它会在页面装载完毕之后执行一次（通过设置 body 标签的 onload 属性），它当然也可以在 setTimeout，setInterval，或者其他事件处理函数中被调用。
一个简单的例子
To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.
作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。
<html> <head> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> 免责声明：本文内容及图片等均属网络转载，如侵即删。本文仅代表作者个人观点，与网页资源网无关。其原创性及文中陈述内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，仅作参考，请自行核实相关内容。
相关文章
精彩导读
热门资讯
关注我们
