|
< canvas>标签。它就是一块用来绘画的空白平面。需要使用JavaScript在这块画布上进行操作和绘画。 可以为canvas元素赋予一个id属性，这样就能通过JavaScript代码以编程的方式访问它。 如果你正在使用jQuery，并且在页面上只有一个canvas，你可以使用$(‘canvas’)来访问它，而不用为它命名。 也可以为canvas指定height（高度）和width（宽度），但这不是必需的。 在< canvas> 和< /canvas>标签之间，还可以指定一些文本，显示在不支持canvas元素的浏览器中。 下面是使用canvas进行绘画的一个简单例子。（画一张苏格兰国旗） <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Draw blue rectangle ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Draw white X ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke(); </script> </body> </html> 现在从头到尾分析一下代码。 首先，创建了一块画布（canvas），并为它赋予了一个ID叫“myCanvas”。如果运行这段代码的浏览器不支持canvas元素，它就会在旗帜原本要出现的位置显示“Your browser does not support the canvas tag”。 接下来，编写了一段脚本。记住，canvas标签只是一个用来画图的容器，必须用JavaScript来画图并将其呈现出来。 首先通过使用ID“myCanvas”获得了对canvas的一个引用； 然后得到canvas的上下文。 上下文所提供的方法和属性，都可以用来在canvas上操作图形和进行绘画。 这里指定了参数“2d”，表示将在2维的环境中来进行绘画。 第三步，完成蓝色矩形的绘画。 用fillStyle方法指定了矩形的颜色为蓝色， 再用fillRect方法画出了矩形， 后者的参数指定了矩形的大小与位置。 fillRect(0, 0, 125, 75)表示：从左上角的顶点（0,0）开始画一个矩形，宽为125像素，高为75像素。 最后，在旗帜上画出了一个白色的“X”。 首先调用beginPath方法启动画路径的进程。指定的lineWidth属性值（也就是路径的宽度）为15像素。另一个属性strokeStyle则被指定为“white”，以表示路径颜色为白色。 接下来，依靠moveTo和lineTo两个方法描绘出了整个路径。 这两个方法都会定位出一个用来绘图的光标，其区别在于：前者移动光标的时候不会画出一条线，而后者在移动的同时会画线。 在画X的过程中，首先从（0,0）——左上角开始，然后画一条线到（125,75）——右下角。接着把光标移到（125,0）——右上角，一笔画到（0,75）——左下角。 最后的stroke方法将真正地呈现这些笔画。 canvas与SVG的简单对比 可缩放矢量图形（Scalable Vector Graphics，简称SVG）是在浏览器窗口进行绘画的一个早期标准。随着HTML5的canvas的发布，许多人都想知道它们之间到底孰优孰劣。 它们之间最大的区别就是：canvas使用立即呈现模式，而SVG使用保留呈现模式。 canvas可以让所画的图形立即呈现在显示器里。在上面给出的代码中，一旦旗帜画完，系统就会“忘掉”它，且不会有任何状态保留下来。如果对它进行改动，将会导致彻底的重画。 与之相比，SVG保留了所呈现对象的一个完整模型。要对图做出改动时，你只需要指出改动的地方（例如矩形的新位置），浏览器来负责呈现新的图形。这节省了开发人员的工作，但也为维护模块付出了性能上的代价。 能够同时通过CSS和JavaScript来进行设计，是SVG另一个值得称道的优点。 与之相比，canvas只能通过JavaScript来进行操作。
|
|
|
