使用 HTML5 Canvas 绘制 Infragistics 的新徽标

Canvas 是 HTML5 中新的关键元素之一，这使得它作为在浏览器中构建 RIA 界面而不是需要使用插件的替代方案极具吸引力，这是你必须要学习的。 JavaScript 和 HTML5 之间的 API 易于上手。 一旦你掌握了 canvas 元素，你几乎可以在其表面上绘制任何你想要的东西。 我喜欢 这张速查表，并在构建我的下方演示时使用了它。 Infragistics 最近推出了其开放且具有创新性的新 IG logo 设计，以代表其所有产品，例如面向 .NET 开发人员的 NetAdvantage® Ultimate 用户界面控件工具集，以及基于云的 Quince Pro™ 设计评审工具。 我认为这个新 logo 将成为开始使用 HTML5 及其 canvas context 元素的理想候选者。 如果你的公司有自己的酷 logo，你可以在 HTML5 canvas 元素上练习绘制它。

在开始编写代码之前，我想强调另一种在 HTML5 中构建丰富 UI 的替代方案，那就是标量矢量图形 (SVG)。 在某种程度上，SVG 在某些方面比 HTML5 具有优势，但就基本绘图功能而言，你可以使用两者中的任何一个。 对于更复杂的插图，两者之间的一个关键区别是，SVG 具有更多细粒度的元素并且是 DOM 的一部分，因此你可以直接将事件挂接到其形状上，而 canvas 只是一个元素，所有内容都需要手动绘制在其表面上。

首先，你需要将你的 canvas 元素放到页面上。 你只需使用新的 <canvas> 标签，并指定其尺寸以及一个 id 属性即可。 你还可以在标签内嵌入一些额外的信息，当浏览器不支持 HTML5 canvas 元素时，这些信息将被显示，因此你可能还可以为使用旧浏览器的用户加载 IG logo 的光栅图像以供查看。

<canvas id="igLogo" width="280" height="250">
   <img src="http://www.infragistics.com/App_Themes/Global/images/logo.gif" />
</canvas>

其余的都使用 JavaScript canvas API 进行绘图。 你可以使用 jQuery ready 函数来启动绘图过程。 首先，你获取 canvas “2d” context，设置线条属性，并且由于你将以 50px 粗的线条绘制整个 IG logo，因此使用 moveTo & lineTo 方法调用绘制整个 logo。 由于 IG logo 有两个圆形和两个锐角，我不得不切换到使用 lineJoin 属性，并调用 stroke 方法，以便正确绘制这些角。 这是整个 JavaScript 方法，你可以自己查看，其中包含关于每个单独代码片段负责绘制内容的注释。

$(function () {
            //Grab the canvas element on the client 
            // and get the context to add stuff to the canvas
            var canvas = document.getElementById("igLogo");
            var CanvasContext = canvas.getContext("2d");
 
            //Since we are going to use the line 
            // to draw the entire logo, set up
            // some properties to get the right width
            // color, the cap and join style 
            CanvasContext.lineWidth = 50;
            CanvasContext.strokeStyle = "#00aeef";
            CanvasContext.lineCap = "square";
            CanvasContext.lineJoin = "round";  
 
            //Through out our drawing process we will just
            // call the moveTo method in case we want draw 
            // things that do not connect, and just call the
            // lineTo so that the drawing operation takes place
            // when we call the stroke method
 
            //Draw the "i" dot
            CanvasContext.moveTo(50, 50);
            CanvasContext.lineTo(50, 51);
 
            //Draw line on the left
            CanvasContext.moveTo(50, 130);
            CanvasContext.lineTo(50, 200);
 
            //Draw the base line
            CanvasContext.lineTo(220, 200);
 
            //Change the line join to get a square edge
            // at the bottom right and then switch back to round
            CanvasContext.lineJoin = "square";
            CanvasContext.stroke();
            CanvasContext.lineJoin = "round";
 
            //Draw line on the right
            CanvasContext.lineTo(220, 50);
 
            //Draw the top line
            CanvasContext.lineTo(120, 50);
 
            //Change the line join to get a square edge
            // at the top left
            CanvasContext.lineJoin = "square";
            CanvasContext.stroke();
 
            //Draw the "G" edge
            CanvasContext.lineTo(120, 100);
 
            //Finally, call the stroke method so that 
            // all the remaining drawing can be completed
            CanvasContext.stroke();
});

请查看运行示例 这里，你可以在浏览器中查看源代码，以了解幕后运行的源代码。 然后，如果你对这个新 IG logo 背后的公司感兴趣，请访问 Infragistics 网站，探索他们为 .NET 开发人员提供的所有优秀产品。

版权所有 2011 Infragistics, Inc. 保留所有权利。 Infragistics 和 NetAdvantage 是 Infragistics, Inc. 的注册商标。 Infragistics logo 和 Quince Pro 是 Infragistics, Inc. 的商标。