HTML5 Canvas入门：绘制红色矩形

"html5 基础实例" HTML5是一种超文本标记语言，它是HTML的最新版本，旨在增强网页的交互性和多媒体支持。对于初学者来说，了解HTML5的基础实例是非常重要的，因为它们能帮助理解如何在实际项目中应用这些新特性。 在HTML5中，`<canvas>`标签是一个关键的新增元素，它提供了在网页上动态绘制图形的能力。这个标签本质上是一个画布，你需要使用JavaScript来填充内容。例如，以下代码展示了如何在页面上创建并填充一个红色的矩形： ```html <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0, 0, 80, 100); </script> ``` 在这个例子中，`<canvas>`标签首先被定义，然后JavaScript获取该元素并获取其2D渲染上下文(`getContext('2d')`)。接着，使用`fillStyle`属性设置填充色，`fillRect`方法用于绘制矩形。 `<canvas>`标签在HTML4.01中是不存在的，它是HTML5引入的新特性，旨在提供更丰富的图形和动画功能。HTML5的`<canvas>`标签有以下属性： 1. `height`: 设置canvas元素的高度，单位为像素。 2. `width`: 设置canvas元素的宽度，单位为像素。 除了这些，`<canvas>`标签还支持HTML5的全局属性和事件属性，如`class`, `id`, `style`, `onclick`等，使得开发者可以对其进行样式控制和事件处理。 在历史发展中，`<canvas>`最初由Apple在其Safari 1.3浏览器中引入，目的是为了在Web和Dashboard组件中实现客户端矢量图形的支持。随后，Firefox 1.5和Opera 9也跟进支持。对于不支持`<canvas>`的旧版IE浏览器，可以通过如Excanvas这样的JavaScript库，利用VML（Vector Markup Language）来实现兼容性。 `<canvas>`的标准化工作由Web应用程序工作小组（Web Applications Working Group，简称WHATWG）进行，现在它已成为HTML5标准草案的一部分，可以在官方规格文档中找到更多详细信息：http://www.whatwg.org/specs/web-apps/current-work/ `<canvas>`是HTML5中强大的图形绘制工具，为开发者提供了丰富的图形编程接口，使得动态和交互式的网页内容变得更加容易实现。对于初学者，理解并掌握`<canvas>`标签的基本使用和相关的JavaScript绘图API，将极大地提升其在网页开发领域的技能水平。