HTML5之Canvas画图

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。

canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能

一、创建canvas元素

不管绘制直线还是图线等，都需要先创建canva元素

//获取canvas元素
var canvans=document.getElementById ("can");
//动态的设置宽和高
//获取屏幕的可视区域宽高
var window_w=document.documentElement.clientWidth ;
var window_h=document.documentElement.clientHeight ;
canvans.width= window_w;
canvans.height= window_h;
//操作canvas
//转化为2d模式   创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文
var content=canvans.getContext("2d");

二、画线

//获取canvas元素
var canvas=document.getElementById ("can");
var window_w=document.documentElement.clientWidth ;
var window_h=document.documentElement.clientHeight ;
canvas.width= window_w;
canvas.height= window_h;
var content=canvas.getContext("2d");

 //画线条

    /*1.设置线宽*/
    content.lineWidth =10;
    /*2.设置线条颜色*/
    content.strokeStle="red";
    //3.画线的坐标
    content.moveTo (0,0);      //起点坐标
    content.lineTo (400,400);   //终点坐标
    //4.执行划线
    content.stroke();

//紧接着画另一条线
    content.beginPath ();   //表示开始
    content.lineWidth =5;
    content.strokeStyle ="blue";  //设置线条颜色
    content.fillStyle ="pink";    //设置填充颜色
    content.moveTo (400,400);
    content.lineTo (0,400);
    content.lineTo (0,600);

    //执行划线
    content.stroke ();
    //5.执行填充
    content.fill();
    content.closePath();

 canvas.onmousemove=function(e){
                //划线到当前客户端的x与y座标
                ctx.lineTo(e.clientX, e.clientY);
                //执行画线
                ctx.stroke();
            }

三、画矩形

    //绘制矩形
    content.fillStyle="red";
    content.lineWidth=3;
    content.strokeStyle="blue";
    /*content.strokeRect(x,y,width,height)以x,y为左上角，绘制宽度为width,高度为height的矩形。*/
    content.strokeRect(200,200,400,200);
    content.fillRect(200,200,400,200);   /* 以x,y为左上角，填充宽度为width,高度为height的矩形。*/
    content.fill();

    //清除
    content.clearRect(300,300,10,10);   /*清除以x,y为左上角，宽度为width,高度为height的矩形区域。*/

四、圆画

语法：context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。

  //绘制圆
    content.beginPath();
     content.strokeStyle="green";
     content.fillStyle="green";
     content.arc(700,350,200,0,Math.PI,true);
     content.fill();
     content.closePath();
     content.beginPath();
     content.fillStyle="red";
     content.arc(700,400,150,0,Math.PI*2,true);
     content.fill();
     content.closePath();

绘制圆形渐变
createRadialGradient(x0, y0,r0 x1, y1,r1);方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

addColorStop(stop, color) 方法规定渐变对象中的颜色和位置。  stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置 ,  color  在 stop 位置显示的 CSS 颜色值。

    content.beginPath();
    var rad=content.createRadialGradient(700,200,10,700,200,300);
    //添加渐变色
    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(700,200,300,0,Math.PI*2,true);
    content.fill();
    content.closePath();

五、绘制图像

 //绘制图像
    var img=document.createElement("img");
    img.src="./image/my_2.png";
    //context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
    //截取image图像以sx,sy为左上角坐标，宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置，图像宽度是dw,高度是dh。
    content.drawImage(img,0,0,200,200,100,100,200,200);

六、绘制文字

       //绘制文字
    var rad=content.createRadialGradient(700,200,10,700,200,300);
    //添加渐变色
    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.beginPath ();
    //使用context.font属性设置字体
   // context.font='italic bolder 48px 黑体';
    content.font="50px yahei";
    content.fillStyle =rad;
    content.fillText("hello word!",800,200,500);

    content.strokeStyle =rad;
    content.strokeText("hello word!",400,200,500);
    content.closePath ();