Canvas学习（二）

现在开始正式学习2D上下文

2D上下文

2D上下文坐标原点的canvas元素的左上角

填充和描边

大部分2D上下文细分为填充和描边，属性为fillStyle和strokeStyle。

context.strokeStyle = "#0000ff";
context.fillStyle = "blue";

绘制矩形

绘制矩形有三种方法,参数都是x坐标，y坐标，矩形宽高。

fillRect()

fillRect()方法在画布上绘制填充指定颜色的矩形，配合fillStyle使用。

var drawing = document.getElementById('drawing');
        // 判断浏览器是否支持canvas元素
            if(drawing.getContext){
               //获取2D上下文对象
                var context = drawing.getContext('2d');
                context.fillStyle = 'red';
                context.fillRect(10, 10, 50, 50);
                context.fillStyle = "rgba(0,0,255,0.5)"
                context.fillRect(30, 30, 50, 50)

strokeRect()

strokeRect()绘制指定颜色描边的矩形

var drawing = document.getElementById('drawing');
        // 判断浏览器是否支持canvas元素
            if(drawing.getContext){
               //获取2D上下文对象
                var context = drawing.getContext('2d');
                context.strokeStyle = 'red';
                context.strokeRect(10, 10, 50, 50);
                context.strokeStyle = 'rgba(0,255,0,0.8)';
                context.strokeRect(20,20,50,50);
            }

clearRect()

clearRect()方法用于清除画布上的矩形区域，本质上是把某一矩形区域变透明，在进行绘图。

var drawing = document.getElementById('drawing');
        // 判断浏览器是否支持canvas元素
            if(drawing.getContext){
               //获取2D上下文对象
                var context = drawing.getContext('2d');
                context.fillStyle = 'red';
                context.fillRect(10, 10, 100, 100);
                context.fillStyle = 'rgba(0,0,255,0.8)';
                context.fillRect(50, 50, 100, 100);
                // 接下来使用clearRect()方法来实现效果
                context.clearRect(25, 25, 20, 20);
                context.clearRect(70, 70, 20, 20);
            }

绘制路径

绘制路径必须调用beginPath()方法，表示开始绘制新路径。
以下是实际绘制路径的方法和代码

arc(x,y,radius,startAngle,endAngle,counterclockwise)

参数分别是：x坐标，y坐标，半径，开始角度，结束角度，是否逆时针

var drawing = document.getElementById('drawing');
            if(drawing.getContext){
                var context = drawing.getContext('2d');
                context.beginPath();
                context.arc(100,100,99,0,2*Math.PI);
                // 描边必须使用stroke()
                context.strokeStyle = 'red';
                context.stroke();
                // 填充需要使用fill()
                context.fillStyle =  'yellow';
                context.fill();
            }

arcTo(x1,y1,x2,y2,radius)

《javascript高级程序设计》这样描述：从上一点开始绘制一条曲线，到(x,y)为止，并以给定半径radius穿过(x1,y1)。然