Canvas特征使作者能够轻松地在网页上绘制各种图形和图像

无需加好友免费技术支持

在过去，很难在网页上进行交互绘图（需要依赖额外的第三方插件）Canvas特征使作者能够轻松地在网页上绘制各种图形和图像。

Canvas提供了脚本（JavaScript）我们可以使用应用接口JS代码操作画布，添加各种图形，实现用户交互。这些特性使用HTML开发网页游戏和一些复杂的网页动画变得更加方便。

例如，使用下面的例子Canvas实现了简单的在线画板功能，您可以直接在网页上绘制线条：

实例可访问：

效果图如下：

实际上Canvas规范包括两部分，一部分是HTML5新引入的canvas元素，还有更为关键的2D渲染上下文。其实前者只是一个容器，后者才是真正画画的地方。它包括绘图和图形操作所需的所有方法和丰富的功能。 强调:绘图为2D渲染在上下文中进行，而不是在canvas进行元素。可以通过canvas访问和显示元素2D渲染上下文。

canvas除了元素的语法单，除了id和class此外，还有两个与容器尺寸相关的属性：宽度和高度。

接下来我们先搞清楚2。D渲染上下文的用法。

canvas元素并非Canvas真正的关键部分是2D渲染上下文，这是你真正画图的地方。canvas元素的用途仅用作2D渲染上下包装器，包括绘图和图形操作所需的所有方法和丰富的功能。理解这一点很重要。强调:绘图在2D渲染在上下文中进行，而不是在canvas进行元素。可以通过canvas访问和显示元素2D渲染上下文。

坐标系统

2D渲染上下文是基于屏幕的标准绘图平台。与其他2D平台类似，采用平面笛卡儿坐标系统，左上角为原点(0，0)。向右移动时，x坐标值增加；向下移动时，y坐标值会增加。如果你想把图形绘制到正确的位置上，一定要理解这个坐标系统。

坐标系统的一个单元通常相当于屏幕上的一个像素，因此位置（24、30）是向右24像素和向下30像素。有时坐标系统的一个单元相当于两个像素（例如，在一些高分辨率显示器中），但一般的经验规则是，一个坐标单元等于一个屏幕像素。

访问2D渲染上下文

我们只创造一个空白canvas元素的简单HTML网页：

在这个例子中，我们将这样做canvas元素赋值给变量，然后通过调用getContext方法将得到2D渲染上下文赋予另一个变量。 必须强调一点，由于我们使用了jQuery，所以需要调用get方法可以访问DOM中的canvas元素可以访问Canvas的getContext方法。

有了包含2D渲染上下文变量后，可以开始绘制图形。在上下文变量声明语句后，添加以下代码：

context.fillRect(0，0，200，200)；

完整的JS代码如下：

上述代码将在画布上绘制以下黑色矩形，从坐标(0、0)开始，长度和宽度为200px：

这个矩形是黑色的，因为Canvas默认元素的默认颜色为黑色。