【canvas】绘图

     要绘制canvas图像，首先创建出canvas画布，然后设置画布的大小。canvas标签中间的内容为替代显示内容，当浏览器不支持canvas标签时会显示出来。创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文：canvas.getContext(画布上绘制的类型),2d： 表示2维(我们一般使用的都是二维的)，webgl：表示3维。 例：var content=can.getContext(“2d”);
一、canvas绘制直线
使用js提供的API去绘制，下面介绍绘制直线的API：
content.lineWidth //设置线宽
content.strokeStyle=“red”; //设置颜色
content.moveTo(0,0);//画线开始坐标
content.lineTo(400,400);//结束坐标
content.stroke();//执行画线
效果展示：
context.moveTo(x,y) //把画笔移动到x,y坐标，建立新的子路径。
context.lineTo(x,y)
建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。
content.fillStyle=“pink”; //填充色；
ontext.fill(); //执行填充

 document.body.onmousedown=function (e){
        var x= e.pageX;
        var y= e.pageY;
        content.moveTo(x,y);
        this.onmousemove=function (event){
            var x1= event.pageX;
            var y1= event.pageY;
            content.lineTo(x1,y1);
            content.stroke();
        }
    }
    document.body.onmouseup=function (){
        this.onmousemove=null;
    }

可实现按下鼠标移动绘制所需要的图形

beginPath()
清空子路径，一般用于开始路径的创建。在几次循环地创建路径的过程中，每次开始创建时都要调用beginPath函数。
closePath()
如果当前子路径是打开的，就关闭它。否则把子路径中的最后一个点和路径中的第一个点连接起来，形成闭合回路。
canvas绘图有两种模式，一种是fill，一种是stroke,fill是填充，stroke是描边线，fillstyle,strokeStyle指定绘图样式。
二、canvas绘制矩形：
content.fillStyle=“red”;
content.lineWidth=3;
content.strokeStyle=“blue”;
content.strokeRect(200,200,400,200);
content.fillRect(200,200,400,200);
content.fill();
效果展示：
context.strokeRect(x,y,width,height)
以x,y为左上角，绘制宽度为width,高度为height的矩形。
context.fillRect(x,y,width,height)
以x,y为左上角，填充宽度为width,高度为height的矩形。
context.clearRect(x,y,width,height)
清除以x,y为左上角，宽度为width,高度为height的矩形区域。
三、canvas绘制圆
content.fillStyle=“red”;
content.arc(700,350,200,0,Math.PI*2,true);
content.fill();
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

使用content.createRadialGradient可以设置渐变色，用addColorStop来添加颜色

 var rad=content.createRadialGradient(300,200,10,300,200,100);
    //添加渐变色
    rad.addColorStop(0,"red");
    rad.addColorStop(0.1,"blue");
    rad.addColorStop(0.2,"green");
    rad.addColorStop(0.3,"pink");
    rad.addColorStop(0.4,"orange");
    rad.addColorStop(0.5,"green");
    rad.addColorStop(0.6,"orange");
    rad.addColorStop(0.7,"blue");
    rad.addColorStop(0.8,"yellow");
    rad.addColorStop(0.9,"red");
    rad.addColorStop(1,"green");
    content.fillStyle=rad;
    content.arc(300,200,100,0,Math.PI*2,true);
    content.fill();

四、绘制图像
context.drawImage(image,x,y)
把image图像绘制到画布上x,y坐标位置。
context.drawImage(image,x,y,w,h)
把image图像绘制到画布上x,y坐标位置，图像的宽度是w,高度是h。
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
截取image图像以sx,sy为左上角坐标，宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置，图像宽度是dw,高度是dh。