HTML5 canvas图形标签用法快速入门，坐标体系详解

HTML5 图形标签的用法快速入门

就是画布，是一个矩形区域，用于在网页上绘制2D图形和图像。 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

坐标体系

电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是）的左上角，X轴正向朝右，Y轴正向朝下，如下图:

起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。

首先概要说明使用HTML5 绘图的方法步骤

是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个xt2D对象，我们可以通过脚本来控制该对象进行绘图。

只是一个绘制图形的容器，除了id、class、style等属性外，还有和width属性。如：

使用在>元素上绘图主要有三步：

获取元素对应的DOM对象，这是一个对象；如：

var = .(" ");

调用对象的()方法，得到一个xt2D对象；如：

var = .("2d");

调用xt2D对象进行绘图。如画一条直线：

//设置对象起始点和终点

.(10,10);

.(200,200);

下面给出比较完整的代码

你的浏览器还不支持

保存文件名为：.html，用浏览器打开，效果如下图（我的保存路径D:\示例）：

创建 元素

向 HTML5 页面添加 元素。规定元素的 id、宽度和高度：

提示：的默认宽高是300*150，单位都是 px。

例1、创建画布（）代码

保存文件名为：.html，用浏览器打开，效果如下图（我的保存路径D:\示例）：

绘制长方形

上面的例1中，画布是空白的，那么如何中其中绘制图形呢？

先看 提供了三种方法绘制矩形方法：

1、(x, y, width, )：绘制一个填充的矩形。

2、(x, y, width, )：绘制一个矩形的边框。

3、(x, y, widh, )：清除指定的矩形区域，然后这块区域会变的完全透明。

说明：这 3 个方法具有相同的参数。

x, y：指的是矩形的左上角的坐标。(相对于的坐标原点)

width, ：指的是绘制的矩形的宽和高。

例2、绘制两个长方形

保存文件名为：.html，用浏览器打开，效果如下图：

绘制圆弧

有两个方法可以绘制圆弧：

1、arc(x, y, r, , , ): 以(x, y) 为圆心，以r 为半径，从 弧度开始到弧度结束。 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

注意：

这里的度数都是弧度。角度转换成弧度：=(Math.PI/180)*

0 弧度是指的 x 轴正方向。

2、arcTo(x1, y1, x2, y2, ): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

例4、绘制圆弧源码

保存文件名为：.html，用浏览器打开，效果如下图：

上述还只是能静态的画图，下面介绍如何实现拖动鼠标动态地画图。

实现铅笔功能

不能画点。使用在一个很细微的粒度下，所以肉眼看起来还算是平滑的曲线。首先设置两个数组, ，然后监听鼠标在上面的点击-移动-松开这一系列事件，把该过程中的所经过的所有点的坐标写进刚刚的两个数组里。写完之后再用一个方法取出数组的内容把刚刚的路线画出来。状态量来标志用户是不是真的在画。使用到了四个：（鼠标按下）（鼠标松开）（鼠标移动）（鼠标离开）.从字面意思就很好理解，分别是鼠标按下、松开、移动、离开时就会触发。

例5、铅笔功能——拖动鼠标动态地画图

保存文件名为：.html，用浏览器打开，效果如下图：

有了上述基础，再进一步学习就可以少受挫折了。

最后，给出一个可以换一些颜色和笔迹粗细的代码，拖动鼠标动态地画图。

例6、可以换一些颜色和笔迹粗细的代码，拖动鼠标动态地画图的例子，先给出效果图：

代码如下：

保存文件名为：.html，用浏览器打开可以试试效果。

注意，在.html文件所在的位置，建立一个img文件夹，包含如下图片

绘制 一个 鼠标 保存 对象 方法