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

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

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

canvas坐标体系

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

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

 

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

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

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

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

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

var canvas = document.getElementById("MyCanvas ");

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

var context = canvas.getContext("2d");

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

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

context.moveTo(10,10);

context.lineTo(200,200);

 

下面给出比较完整的代码

   

   

   

   

        你的浏览器还不支持canvas

   

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

 

创建 Canvas 元素

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

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

例1、创建画布（Canvas）代码

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

 

 

绘制长方形

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

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

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

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

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

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

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

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

 

例2、绘制两个长方形

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

 

绘制圆弧

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

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

注意：

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

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

 

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

 

例4、绘制圆弧源码

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

 

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

实现铅笔功能

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

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

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

 

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

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

 

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

代码如下：

   
   
   

   

       

           
           
           
       

       

           
               
           
       

   

   

       
   

   

---

   

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

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