Canvas绘图

Canvas绘图

——基本用法：
要在这块画布（canvas）上绘图，需要取得绘图上下文， 此时就要调用getContext()方法并传入上下文的名字。传入2d就可取得2d上下文对象。
同时在使用canvas元素之前首先要检测getContext()方法是否存在，虽然浏览器会为该标签创建一个DOM对象，而且可以应用它但它可能并没有getContext()方法。
如下：

<canvas id="drawing" width="200" height="200" ></canvas>

 var drawing = document.getElementById("drawing");
    //确定浏览器支持<canvas>元素
    if(drawing.getContext) {
        var context = drawing.getContext("2d");
        //后续代码
    }

——填充和描边：
用到两个属性：fillStyle和strokeStyle
这两个属性的值可以是字符串，渐变对象或模块对象。为它们指定表示颜色的字符串值可以使用CSS中指定颜色的任何格式，包括颜色名，十六进制码，rgb, rgba, hsl, hsla
所有涉及描边（strokeStyle）和填充（fillStyle）的操作都将使用这两个属性，直至重新设置这两个值。

 var drawing = document.getElementById("drawing");
    //确定浏览器支持<canvas>元素
    if(drawing.getContext) {
        var context = drawing.getContext("2d");
        context.fillStyle="red";
        context.strokeStyle="0000ff";
    }

——绘制矩形：
与矩形相关的方法包括fillRect()，strokeRect()，clearRect()方法。都能接收四个参数：x坐标，y坐标,宽度和高度，单位都是像素。

fillRect()方法的应用：

 var drawing = document.getElementById("drawing");
    //确定浏览器支持<canvas>元素
    if(drawing.getContext) {
        var context = drawing.getContext("2d");
        //绘制绿色矩形
        context.fillStyle="green";//该代码后面的代码呈现的填充颜色就会是green,直至重新通过该属性设置新的颜色值
        context.fillRect(0,0,200,200);
        //绘制有透明度的矩形
        context.fillStyle="rgba(0,255,255,0.3)";
        context.fillRect(10,10,180,130);
        //绘制白色矩形
        context.fillStyle="rgb(255,255,255)";
        context.fillRect(40,20,50,50);
        //绘制蓝色矩形
        context.fillStyle="#0000bb";
        context.fillRect(100,20,50,50);
    }
    //代码显示结果如下图：

strokeRect()方法的应用：

 var drawing = document.getElementById("drawing");
  if(drawing.getContext) {
      var context = drawing.getContext("2d");
      context.strokeStyle="blue";
      context.strokeRect(0,0,200,150);
      context.strokeStyle="orange";
      context.strokeRect(5,5,180,100);
  }
  //代码显示结果如下图：

context.clearRect()方法的应用：

var drawing = document.getElementById("drawing");
  if(drawing.getContext) {
      var context = drawing.getContext("2d");
      context.fillStyle="darkred";
      context.fillRect(0,0,200,200);
      context.clearRect(40,30,40,40);
      context.clearRect(120,30,40,40);
   ｝  //代码显示结果如下图：

——绘制路径：
要绘制路径必须首先必须调用beginPath9()方法，表示要开始绘制新路径。然后再通过调用下面方法实际的绘制路径。

• arc(x,y,radius,startAngle,endAnglecountterclockwise):以(x,y)为圆心绘制一条弧线，半径为radius,起始角度（用弧度表示）为startAngle,结束角度为endAngle。最后一个参数表示角度是否是按逆时针方向计算的，值为true时表示按顺时针方向计算。

• arcTo(x1,y1,x2,y2,radius): 从上一点开始绘制一条弧线，到（x2,y2）为止，并且以给定的半径穿过（x1,y1）。

• lineTo(x,y): 从上一点开始绘制一条直线，到(x,y)为止。

• moveTo(x,y): 将绘图游标移动到（x,y）,不画线。

• rect(x,y,width,height): 从（x,y）开始绘制矩形路径。

  创建了路径以后接下来的选择是：
  @如果想要绘制一条路径起点的线条可以调用closePath()方法。
  @ 如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法。
  @同时如果想用strokeStyle对它进行路径描边，可以调用stroke()方法。
  @也可以调用clip()方法在路径上创建一个剪切区域。