Canvas 2D上下文

1、要使用Canvas元素，必须设置其width和height属性，制定绘图区域大小
2、要在这块画布上绘图，需要取得绘图上下文：通过调用getContext()方法并传入上下文名字。
3、2D上下文getContext("2d")，坐标从左上角开始，width和height表示水平和垂直方向可用像素
4、绘制矩形
*fillRect(): *在画布上绘制矩形，通过fillStyle填充指定的颜色
strokeRect(): 在画布上绘制矩形，通过strokeStyle指定颜色描边
*clearRect(): *清楚画布上的矩形区域。本质：把绘制上下文中的某一矩形区域变透明。
4个参数：矩形x坐标，y坐标，矩形宽度，高度

<canvas id="drawing" width="200" height="200"></canvas>
    <script type="text/javascript">
        //获得Canvas元素
        var drawing = document.getElementById("drawing");

        //确定浏览器支持Canvas元素
        if(drawing.getContext){
            var context=drawing.getContext("2d");

            //绘制红色矩形
            context.fillStyle="red";
            context.fillRect(10,10,50,50);

            //绘制半透明的蓝色矩形
            context.fillStyle="rgba(0,0,255,0.3)";
            context.fillRect(30,30,50,50);

            //在两个矩形重叠的地方清除一个小矩形
            context.clearRect(40,40,10,10);

            //绘制黑色描边矩形
            context.strokeStyle="black";
            context.strokeRect(100,10,50,50);

            //半透明描边
            context.strokeStyle="rgba(0,0,255,0.5)";
            context.strokeRect(120,20,50,50);
        }
    </script>

效果：

代码效果
5、绘制路径
调用beginPath()方法，表示要开始绘制新的路径
方法：
arc(x,y,radius,startAngle,endAngle,true/false)
以(x,y)为圆心绘制半径为radius的弧线，起始角度分别为startAngle,endAngle，true表示逆时针计算
arcTo(x1,y1,x2,y2,radius)
从上一点开始绘制弧线，到(x2,y2)，半径为radius穿过(x1,y1)
bezierCurveTo(c1x,c1y,c2x,c2y,radius)
从上一点开始绘制一条曲线，到(x,y)为止，前面两个是控制点
lineTo(x,y)
从上一点开始绘制一条直线
moveTo(x,y)
将游标移动到(x,y)，不画线
quadraticCurveTo(cx,cy,x,y)
从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点
rect(x,y,width,height)
从x,y开始绘制矩形路径：宽高width,height

6、绘制文本
方法：
fillText():
strokeText():
参数：文本字符串、坐标
属性：font文本样式大小字体、textAlign文本对齐方式、textBaseline文本基线

7、变换
方法：
rotate(angle) : 围绕原点旋转图像angle弧度
scale(scaleX,scaleY): 缩放图像，在x方向sscaleX，y方向scaleY，默认是1.0
translate(x,y) 将坐标原点移动到(x,y)
transfrom()
setTransform()
追踪上下文状态：
save(): 保存当前状态
restore(): 返回上一级状态

<canvas id="drawing" width="200" height="200"></canvas>
    <script type="text/javascript">
        //获得Canvas元素
        var drawing = document.getElementById("drawing");

        //确定浏览器支持Canvas元素
        if(drawing.getContext){
            var context=drawing.getContext("2d");

            //开始路径
            context.beginPath();

            //绘制外圆
            context.arc(100,100,99,0,2*Math.PI,false);

            //绘制内圆
            context.moveTo(194,100);
            context.arc(100,100,94,0,2*Math.PI,false);

            //变换原点
            context.translate(100,100);

            //绘制文本
            context.font="bold 14px Arial";
            context.textAlign="center";
            context.textBaseline="middle";
            context.fillText("12",0,-85);//12
            context.fillText("3",85,0);//3
            context.fillText("6",0,85);//6
            context.fillText("9",-85,0);//9

            //旋转表针
             context.rotate(0.5);

            //绘制分针
            context.moveTo(0,0);
            context.lineTo(0,-75);

            //绘制时针
            context.moveTo(0,0);
            context.lineTo(-65,0);

            //描边路径
            context.stroke();
        }
    </script>

代码效果
8、阴影
属性：
shadowColor:阴影颜色，默认黑
shadowOffsetX:X轴方向阴影偏移量，默认0
shadowOffsetY:y轴方向阴影偏移量，默认0
shadowBlur:模糊像素

<canvas id="drawing" width="200" height="200"></canvas>
    <script type="text/javascript">
        //获得Canvas元素
        var drawing = document.getElementById("drawing");

        //确定浏览器支持Canvas元素
        if(drawing.getContext){
            var context=drawing.getContext("2d");

            //设置阴影
            context.shadoeOffsetX=5;
            context.shadoeOffsetY=5;
            context.shadowBlur=4;
            context.shadowColor="rgba(0,0,0,0.9)";

            //绘制红色矩形
            context.fillStyle="red";
            context.fillRect(10,10,60,60);

            //绘制蓝色矩形
            context.fillStyle="blue";
            context.fillRect(30,30,60,60);
        }
    </script>

代码效果

9、渐变

• 线性渐变
  createLinearGradient()参数：起点x坐标、起点y坐标、终点x坐标、终点y坐标，
• 径向渐变
  createRadiaGradient()6参数：前三个参数，起点圆心坐标和半径，后三个参数，终点圆心坐标和半径
  想要达到向外扩散的渐变效果，就要将两个圆定义为同心圆
  创建渐变对象后，使用addColorStop()指定色标，参数：色标位置、颜色值。色标位置是一个从0-1之间的数字

//创建线性渐变对象
var gradient=context.createLinearGradient(10,10,60,60);
 //添加渐变颜色
 gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//绘制渐变矩形
context.fillStyle=gradient;
context.fillRect(10,10,50,50);

PS：如果没有将举行绘制到恰当的位置，可能只会显示部分渐变效果

//创建径向渐变对象
            var gradient2=context.createRadialGradient(55,55,10,55,55,30);
 //添加渐变颜色
 gradient2.addColorStop(0,"white");
gradient2.addColorStop(1,"black");

 //绘制渐变矩形
 context.fillStyle=gradient2;
context.fillRect(30,30,50,50);

代码效果
10、绘制图像
方法：
drawImage()
9个完整参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。
11、模式
重复的图像，可用来填充或者描边图形
方法：createPattern()
方法参数1：HTML <img>元素
参数2：如何重复，"repeat"、"repeat-x"、"repeat-y"、"no-repeat"

var image=document.images[0],
  pattern=context.createPattern(image,"repeat");

  //绘制矩形
context.fillStyle=pattern;
context.fillRect(10,10,150,150);

PS：
a 从画布原点开始，将填充样式（fillStyle）设置为模式对象，只表示在某个特定的区域显示重复的图像。
b createPattern()方法第一个参数也可是是一个<video>元素，或者另一个<canvas>元素。
11、使用图像数据
方法：getImageData()
参数：要去的数据画面区域的x,y坐标以及宽度高度
返回数据：ImageData对象，每个对象有三个属性width、height、data，data属性是一个保存着图像中每个像素的数据数组，每个像素用4个元素保存，分别是红、绿、蓝、透明度。
数据可进行操作完成特定需要。

12、合成
属性
globalAlpha:指定透明度
plobalComposition：表示后绘制的图形怎样与线绘制的图形结合，字符串表示。