HTML5 canvas绘图

canvas绘制图形

canvas元素的基础知识

在页面上放置一个canvas元素，就相当于在页面放置了一块画布，可以在其中描绘图形。事实上，canvas元素只是一个无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。

在页面放置canvas元素

首先要指定的是ID、width、height三个属性

<canvas id="canvas" width="400" height="300" />

绘制矩形

1. 取得canvas元素，用document.getElementById()方法
2. 取得上下文(context)，用getContext()方法
3. 填充与绘制边框，填充（fill）、绘制边框（stroke）
4. 设定图形的样式(style)，主要是针对图形的颜色。填充样式(fillStyle)、图形边框的样式(strokeStyle)
5. 指定线宽，通过设定图形上下文的lineWidth属性设置图形边框的宽度。
6. 指定颜色值
7. 绘制矩形，使用fillRect()和strokeRect()。例如：context.fillRect(x,y,width,height)；x,y指定的是矩形起点坐标；width和height指定的是矩形的宽度和高度。

<script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');
            context.fillStyle = '#D2CDCD';
            context.fillRect(0,0,400,300);

            context.fillStyle = 'red';
            context.strokeStyle = 'blue';
            context.lineWidth = 1;
            context.fillRect(50,50,100,100);
            context.strokeRect(50,50,100,100);
        }
        window.onload = draw;
</script>

使用路径

想要绘制除了长方形和正方形以外的其他图形需要使用路径。

绘制圆形、圆弧

1. 开始创建路径，使用上下文的beginpath()方法，context.beginPatch();
2. 创建圆形路径，需要使用圆形上下文对象的arc()方法，context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
   x,y绘制圆形的圆心，radius绘制圆形的半径，startAngle起始角度、endAngle结束角度，anticlockwise参数为一个布尔值，true表示逆时针绘制，false表示顺时针绘制。
   
3. 关闭路径，context.closePath(),关闭路径后，路径创建就完成，例如绘制圆弧时，关闭路径，圆弧才会闭合。
4. 设定绘制样式，进行图形绘制。

<script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(100,100);
            context.arc(100,100,50,Math.PI*5/4,Math.PI*7/4,false);
            context.closePath();
            context.fillStyle = '#D2CDCD';
            context.fill();
        }
        window.onload = draw;
    </script>

路径不关闭会如何

如果不关闭路径，已经创建好的路径会永久保留，如果把使用路径绘制这个方法循环，绘制的图形会一次又一次的重叠。

绘制直线

绘制直线时会用到moveTo()和lineTo()
moveTo()方法将光标移动到指定的坐标点，绘制直线时以这个坐标为起点。moveTo(x,y);
lineTo()方法表示绘制直线的终点。lineTo(x,y);

绘制曲线

可以使用图形上下文对象arcTo()方法绘制曲线
arcTo()方法的定义，context.arcTo(x1,y1,x2,y2,radiusX,[radiusY],[rotation]);
x1,y1为控制点坐标；x2,y2为圆弧终点坐标；radiusX代表圆弧横向半径；radiusY（可选）代表圆弧纵向半径，rotation（可选）代表圆弧顺时针方向旋转角度。

<script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(150,20);
            context.arcTo(150,100,50,20,30);        
            context.strokeStyle = '#D2CDCD';
            context.stroke();
        }
        window.onload = draw;
    </script>

所绘制的圆弧与（150,20）（150，100）俩坐标连接的直线以及（150，100）（50，20）俩坐标连接的直线都相切。

绘制渐变图形

渐变是指在填充时从一种颜色慢慢过渡到另一种颜色

绘制线性渐变

绘制线性渐变需要用到LinearGradient对象。使用图形上下文对象的createLinearGradient()方法创建该对象，定义：

context.createLinearGradient(xStart,yStart,xEnd,yEnd);

xStart,yStart为渐变起始点；xEnd，yEnd为渐变终点。
使用addColorStop()方法追加渐变的颜色，定义：

context.addColorStop(offset,color);

offset为所设定的颜色离开渐变起始点的偏移量，color为绘制时所用的颜色。
因为是渐变，所以至少使用两次addColorStop()方法来追加两个颜色（开始颜色和结束颜色）。

<script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');
            var g1 = context.createLinearGradient(100,100,100,200);
            g1.addColorStop(0,'red');
            g1.addColorStop(1,'green');
            context.fillStyle = g1;
            context.fillRect(100,100,100,100);  
        }
        window.onload = draw;
</script>

绘制径向渐变

径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。
使用图形上下文的createRadialGradient()方法绘制径向渐变，定义：

context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

xStart,yStart为开始圆圆心坐标；radiusStart为开始圆的半径；xEnd,yEnd为结束圆的圆心坐标；radiusEnd为结束圆的半径。
设置颜色时，使用addColorStop()方法设定。

<script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');
            var g1 = context.createRadialGradient(100,100,0,100,100,100);
            g1.addColorStop(0,'red');
            g1.addColorStop(1,'green');
            context.fillStyle = g1;
            context.arc(100,100,100,0,Math.PI*2,false);
            context.fill(); 
        }
        window.onload = draw;
</script>

绘制变形图形

坐标变化

对坐标变换的处理有以下3种方式
1、平移
使用图形上下文的translate()方法移动坐标轴原点，定义context.translate(x,y);
x表示将坐标轴原点向左移动多少个单位，y表示将坐标轴原点向下移动多少个单位。
2、扩大
使用图形上下文的scale()方法放大图形，定义：context.scale(x,y);
x是水平方向的放大倍数，y是垂直方向的放大倍数。
3、旋转
使用图形上下文的rotate()方法旋转图形，定义：context.rotate(angle);
angle表示旋转的角度，旋转中心点是坐标轴的原点，angle为正数时，旋转是以顺时针方向旋转的。

给图形绘制阴影

添加阴影效果时，只需利用图形上下文对象的几个关于阴影绘制的属性就行
shadowOffsetX：阴影的横向位移量
shadowOffsetY：阴影的纵向位移量
shadowColor：阴影的颜色
shadowBlur：（可选）阴影的模糊范围