第9章 canvas绘图

在HTML5的新规范中，提供了canvas标记和相关的API可以在网页上进行绘图操作。与之前绘图方式相比，
canvas绘图的优势

• 不借助于第三方的插件和工具
• 不借助于服务器，在客户端完成绘制

canvas绘图的劣势

• 描绘动画效果时，效率不高

<canvas>标记可以理解是一个画布，通过操作下面的这些API完成绘制工作

1. 绘制方式

坐标系
canvas默认左上角是坐标原点(0,0)，向右延伸为x轴的正向，向下延伸为y轴的正向。

理解坐标系

在canvas中绘制方式主要两种

• fill 填充式
• stroke 描边式

2. 绘制线

使用stroke方法

ctx.strokeStyle = "#2BD62D"; 
ctx.lineWidth = 5;
ctx.moveTo(100,100); //线的起点
ctx.lineTo(300,100); //线的终点
ctx.stroke(); //绘制

3. 绘制矩形

fillRect(起点坐标x,起点坐标y,长,宽)

ctx.fillStyle = "#33CCFF"; //设置填充颜色
ctx.fillRect(0,0,800,600); //绘制矩形，从(0，0)位置,绘制800x600的矩形

ctx.strokeStyle = "#33CCFF"; //设置描边颜色
ctx.lineWidth = 5; //边框的粗细
ctx.strokeRect(0,0,800,600); //绘制矩形，从(0，0)位置,绘制800x600的矩形

4. 绘制圆形/圆弧

arc(圆心坐标x，圆心坐标y，半径，开始角度，结束角度，是否为逆时针绘制);
角度：360度=2*PI；

//绘制圆形
ctx.beginPath();
ctx.fillStyle = "#FF8533"; 
ctx.arc(500,300,200,0,Math.PI/2,false);//圆心坐标(500,300)，半径是200，顺时针的0-90度的圆
ctx.fill();
ctx.closePath();

5. 绘制扇形

ctx.beginPath()和closePath()之间可以完成闭合操作，设置落笔点为圆心，在最终圆弧闭合时会与圆心产生连线，形成扇形。

ctx.beginPath();
ctx.fillStyle = "#FF8533"; 
ctx.moveTo(200,300); //设置落笔点为圆心
ctx.arc(200,300,200,0,Math.PI/2,false);
ctx.fill();
ctx.closePath();

6. 绘制渐变色

canvas支持两种方式的渐变色设置

• 线性渐变

var x = ctx.createLinearGradient(开始坐标x, 开始坐标y, 结束坐标x, 结束坐标y);

沿着线的方向，产生渐变

通过

x.addColorStop(0,"#FFFFFF");

设置渐变细节，第一参数的取值范围[0,1]，其中0表示开始位置的颜色，1表示结束位置的颜色

• 径向渐变

var x = ctx.createRadialGradient(开始圆心坐标x,开始圆心坐标y,开始半径,结束圆心坐标x,结束圆心坐标y,结束半径);

也需要使用

x.addColorStop(0,"#FFFFFF");

设置渐变细节

制作一个圆心发散效果圆

<canvas id="can1" width="600" height="400"></canvas>
<script type="text/javascript">
    window.onload = function (){
        var c = document.getElementById("can1");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#66CCFF";
        ctx.fillRect(0,0,600,400);
        
        var x = ctx.createRadialGradient(300,200,50,300,200,150);
        x.addColorStop(0,"#FFFFFF");
        x.addColorStop(0.85,"#FFFF66");
        x.addColorStop(1,"#FFFF00");
        
        
        ctx.beginPath();
        ctx.fillStyle = x;
        ctx.arc(300,200,150,0,Math.PI*2,true);
        ctx.fill();
        ctx.closePath();
        
    }
</script>

7. 绘制动画

动画片的原理由多张连续的静止图片组成，快速连续播放时形成动画效果。
canvas动画的原理是一致的，利用setInterval方法每隔一段时间重新绘制图像，间隔很短时就会形成动画效果。