HTML5 Canvas元素指南

HTML5<帆布>元素有独特的历史。一开始是苹果的产物追溯到2004年，帆布最终被添加到官方的W3C HTML5规范中，成为HTML5中最有趣和令人兴奋的部分之一。它是由网页设计师全世界。不幸的是，这个元素需要做一些工作才能理解，而且与通常的普通HTML元素不同，它需要的不仅仅是静态标记和样式。这个元素是伟大的网站寻找更多响应网页设计，比如房地产经纪人．

在本指南中，我希望能让您开始理解帆布元素及其关联代码中需要和期望的内容。这将帮助你对帆布准备用这个独特的HTML5元素制作一些有趣而强大的东西。

定义和标记

我无法定义帆布元素比官方W3C规范更好，所以我在这里只引用该文档的一部分:

canvas元素为脚本提供了一个与分辨率相关的位图画布，可用于动态渲染图形、游戏图像或其他可视图像。

我也喜欢这种方式维基百科描述了它的用法：

Canvas由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过类似于其他常见2D api的全套绘图函数访问该区域，从而允许动态生成图形。

canvas的一些预期用途包括构建图形、动画、游戏和图像合成。

正如您已经看到的，这个元素有一点复杂。让我们一步一步来，从标记开始。

的标记帆布元素看起来像这样:

类似于< img >元素,帆布在标记中设置了宽度和高度，以获得实际的大小。因为帆布需要脚本来实现它的全部功能，我添加了一个id属性将允许我们使用JavaScript或JavaScript web开发库来瞄准它jQuery或MooTools．有了这个基本标记之后，就可以使用CSS来生成帆布可见或，使用CSS3过渡属性，移动它-就像你对任何其他HTML元素做的一样。

你可以添加边框，填充，背景色，空白，你可以浮动帆布，并为其分配CSS属性，就像任何HTML5元素一样。

一些使它工作的基本脚本

要在画布上开始画画，你需要先瞄准它使用文档对象模型(DOM)。因为你可以包含不止一个帆布元素，这就是ID属性发挥作用的地方(在本例中，我们的ID是myCanvas)．一旦帆布是有针对性的,getContextJavaScript方法需要被调用。

该方法识别目标的上下文帆布元素，这意味着您将能够访问画布绘图API。下面是在画布上绘制对象的代码示例:

var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");context.fillStyle= "rgba(0, 0, 255, .5)"; context.fillRect(25, 25, 125, 125);

在定义帆布元素通过DOM(第1行)，定义上下文(第2行)，然后绘制形状并着色(第3行和第4行)。前两行或多或少是标准的东西，而第三行和第四行由一些使用绘图API中可用的属性和方法的定制代码示例组成。

上面给出的四个值fillRect ()方法表示到x轴的距离、到y轴的距离、宽度和高度(按此顺序)。上面的代码会生成一个这样的方框:有了这个基本的理解帆布元素，这里有一些注意事项:

• 每一个帆布元素开始时是空白的，所以它不会出现在页面上，除非在它上面画了一些东西，或者通过CSS设置了样式(例如给它一个边框或给它一个背景色)。
• 每一个帆布元素出现在DOM中
• 你可以擦掉所有画在帆布控件的宽度和/或高度帆布元素
• 的getContext ()方法“返回一个公开用于绘图的API的对象”(定义直接来自规范)
• 目前有两种上下文可用:二维而且webgl（二维是当前更常用的上下文)
• 的帆布元素是“取决于分辨率”的，这意味着(与SVG不同)它在呈现后并不总是清晰地缩放
• 任何形状的默认颜色都是黑色
• canvas绘制的对象使用RGBA或Hex值赋予颜色

绘制矩形和路径

2D上下文允许使用许多不同的绘图方法和属性，每种方法都使用经验丰富的CSS和JavaScript开发人员所熟悉的语法。所以不要害怕，这是很简单的东西。下面是一些与绘制矩形相关的JavaScript方法:

• fillStyle (色| |梯度模式）:为形状设置填充样式
• fillRect (x, y, w, h）:根据给定的大小和坐标值绘制一个矩形，并用fill样式中定义的内容填充对象
• clearRect (x, y, w, h）:清除由给定大小和坐标值定义的空间内的像素
• strokeStyle (色| |梯度模式）:设置形状的描边样式
• strokeRect (x, y, w, h）:根据给定的大小和坐标值，使用笔画或边框(填充除外)绘制矩形;这是使用确定的笔画样式完成的

与绘制矩形背后的概念类似，您可以使用函数()而且画线()方法。这些方法通过x和y坐标定义将要绘制的直线或路径的起点和终点。然而，这些方法实际上并不绘制可见的线;他们准备帆布方法时将发生的实际描线中风()方法。

这里有一个简单的例子:

var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");上下文。函数(0,0);上下文。画线(400、400);上下文。strokeStyle = " # ff0000”;context.stroke ();

假设标记保持不变(画布的大小为400×400)，上面的代码(第3-6行)从画布的左上角(0,0)到右下角(400,400)绘制一条对角线。最后一行代码使用了前面提到的中风()方法描边在第3行和第4行中准备的路径。第5行有可选的strokeStyle方法，该方法可为线条指定颜色、渐变或图案。如果没有声明笔画样式，该行将默认为黑色。这是上面代码块绘制的线:下面是关于绘图API需要注意的几点:

• 定义路径和形状的坐标可以有十进制值，鼓励这样做，以确保在某些情况下准确地表示线宽
• 若要以多种笔画样式绘制多条路径，可使用beginPath ()方法，然后closePath ()方法在绘制路径后结束路径
• 对象上可以绘制任何Unicode字符帆布元素,利用字体，testAlign,textBaseline属性来样式和对齐字符
• 如果不对文本使用排版属性，则文本将使用应用于帆布元素

线性和径向梯度

与CSS3在大多数现代浏览器中所能实现的功能保持一致帆布绘图API允许你用两种类型的渐变填充你的形状和路径。下面是一个用线性渐变填充矩形的例子:

var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");var myGradient = context。createLinearGradient(0,0,100,0);myGradient。addColorStop(0,“# cccccc”);myGradient。addColorStop (1 # ffffff);context.fillStyle= myGradient; context.fillRect(25, 25, 125, 125);

在上面的第3行，梯度被存储在内存中，并被赋予4个参数。前两个参数是决定梯度起始点的x和y坐标;第二个参数是决定梯度终点的x和y坐标。

创建渐变后(但还没有绘制)，添加颜色停止(第4-5行)。然后在画布上下文上定义填充样式，在第3行创建的渐变被添加为填充值(第5行)。第5行之后，所有内容都存储在内存中，等待在形状或路径上使用。

最后一行通过创建一个放置渐变的形状使渐变可见。这是渐变的样子:以下是关于渐变的一些注意事项:

• 梯度的位置相对于帆布，而不是形状(一开始看起来有点奇怪)
• 要在整个形状上制作对角渐变，渐变的坐标应该与形状的坐标和大小相同
• 线性梯度中的第一个和最后一个颜色点分别用0和1表示;任何额外的颜色停止都用0到1之间的十进制值表示。在物体的50%处设置一个颜色停止点，那么，就是。5。
• 方法创建径向梯度createRadialGradients ()方法，它有6个参数;前3个参数为起点创建一个圆，后3个参数为终点创建一个圆

其他可用的方法和属性

到目前为止，我所讨论的是一些更容易处理和理解的方法和属性。然而，Canvas在其绘图API中有更广泛的工具集。下面是一些可用的内容，并附有规范相关部分的链接:

• 变换，包括缩放和旋转
• 合成
• 阴影
• 复杂形状，包括贝塞尔曲线和弧线

回退的内容

强烈建议对不支持的设备使用后备内容。通过将备用内容放在开头和结尾之间，可以包含备用内容<帆布>标签。例如，你可能会有这样的东西:

   .jpg 

         
不管出于什么原因，帆布不可用时，用户将看到fallback.jpg图片代替。这一形象将不会显示如果帆布是支持的。
         
Canvas的基本代码模板
         
Mozilla的开发者中心为绘图提供了一个很好的“骨架”模板帆布元素。这是有一些小修改的模板。
         
  
   
    
         
模板的JavaScript做了几件事。
         

         
首先，它检查窗口是否已经完全加载，这意味着DOM已经准备好可以处理了。这不是很有效，因为DOM会在加载整个窗口之前就准备好了，所以在较重的页面上，函数执行的时间会比它应该执行的时间长。更好的解决方案是使用document.addEventListener论点是DOMContentLoaded但这在ie浏览器中是不支持的(这在IE9之前并不重要)。
         

         
如果你使用像jQuery这样的JavaScript web开发库，那么它们通常会有方法或函数来为你处理这个问题。美元(文档)时)．的内联JavaScript是提高效率的另一种方法帆布元素来调用画函数(如<帆布onLoad = "画();" >)，但这使用了突兀的JavaScript，并不是一个真正的好实践。
         

         
其次，我们使用特征检测而不是浏览器嗅探来查看是否帆布是支持的。我们使用if/else控制结构来实现这一点。如果canvas.getContext不是空的，那么我们可以假设帆布是受支持的，并且可以进行处理。
         

         
否则(其他的)，我们可以运行一些代码在事件帆布不支持(例如告诉用户该页面需要使用帆布支持)。对于CSS，我们只在帆布元素，使它更容易看到。最后，HTML只需要给出帆布元素具有ID、宽度和高度。
         

         
浏览器和移动设备支持
         
如果您打算花时间创建某种后备内容，那么最好了解浏览器对帆布元素及其关联的脚本。帆布支持以下浏览器和设备:
         

          
Internet Explorer 9
          
Firefox 3.0 +
          
Safari 3.0 +
          
Chrome 3.0 +
          
Opera 10.0 +
          
iPhone 1.0 +
          
Android 1.0 +
         
         
ie 6-8怎么样?
         
使用名为ExplorerCanvas，帆布支持在Internet Explorer 6及以上版本中可用。所需要的只是在任何使用帆布元素。
         

         
根据我在运行一些包含在exploreccanvas库中的示例页面方面的有限经验，IE的渲染帆布Elements非常慢，而且资源非常多，所以不幸的是，这种解决方法不太吸引人。
         
为什么使用帆布?
         
您可能会认为，使用如此复杂的方法创建简单的对象有点适得其反和违反直觉。然而，Canvas不应该被用来创建静态对象。
         

         
Canvas最适合根据用户输入动态绘制对象，或者更新依赖于某种动态信息的对象的显示(例如通过线形图可视化的实时股票市场波动)。
         
HTML5画布的例子
         
虽然我不是一个实验技术的狂热爱好者，但在这一点上，它可能是有价值的展示什么是可能的帆布元素。下面是一些应用程序和其他实验的例子，它们用HTML5做了一些有趣而又非常酷的事情帆布：
         
帆布水族馆
         
一个虚拟鱼缸在您的浏览器使用有吸引力的鱼建立没有任何图形文件。它有逼真的鱼运动和气泡。点击鱼缸添加尽可能多的鱼，你想!
         

         

         
Twitter。画布。10 k
         
HTML5的实验帆布更上一层楼。
         

         
你在背景中看到的每个圆圈都是一个Twitter用户。单击一个圆圈，您将看到关于该用户的更多信息。 < / p > < h4 > < a href =" http:>HTML5 Canvas和音频实验
         
这是一个小实验，加载100条与HTML5相关的tweet，并使用基于javascript的粒子引擎显示它们。每个粒子代表一条tweet——点击其中一条，它就会出现在屏幕上。
         
特工008球
         
国际台球锦标赛被恐怖组织CHALK渗透了。不要让他们赢!在计时器结束前尽可能多地击沉球。
         

         

         
帆布周期
         
这个演示是一个完整的8位颜色循环引擎的实现，呈现为32位HTML5帆布在实时。有许多颜色的自行车场景可供选择，与一些环境音效相匹配。
         
jsCanvasBike
         
一个简单的摩托车游戏使用帆布和JavaScript。使用键盘控制做尽可能多的后空翻和前空翻。
         
进一步的资源
         
最后，这里还有一些讨论或使用的文章、教程和库帆布元素:
         

          
帆布工具包:基本的HTML5帆布为那些熟悉Java. awt. graphics类的人提供一个绘图库。
          
画布元素:在马克·皮尔格林的书中讨论过深入HTML5
          
RGraph: HTML5 canvas图形库
          
Processing.js:一种开放的编程语言，供想要使用HTML5 canvas元素编程图像、动画和交互的人使用
          
 text:一个库，允许canvas的文本绘制方法在不支持的浏览器中工作
          
画布上演示:使用HTML5的应用程序、游戏、工具和教程的家园<帆布>元素
          
Canvas 2D API简介:HTML5 Doctor教程
          
展示使用HTML5 Canvas开发的游戏
          
用HTML5和JavaScript弹球
         
         
如果你知道任何使用HTML5 canvas元素的酷库、演示或实验，请在评论中告诉我们。
         
相关内容
         

          
用HTML5和JavaScript弹球
          
HTML5应用的现状
          
你需要加快速度的唯一HTML5资源
          
相关类别：超文本标记语言而且Web开发