html5学习——canvas

   前言：才简单的学习完一些关于canvas的知识，简单的进行各总结，复习。

   canvas，是html5中新增的一个元素，它相当于是在页面上放置了一个"画布"。我们可以在这张画布上绘制我们想要的图形及文字。

   首先是在页面中绘制一张“画布”，具体操作如下：

 <canvas id="canvas" width="1200" height="780" >
      Your browser does not support the canvas element.(如果浏览器不支持canvas，显示本段文字)
  </canvas>

   让后将canvas与javascript中的代码进行绑定，具体操作如下：

var canvas = document.getElementById('canvas');
            if(canvas == null){
                return false;
            }
            var context = canvas.getContext('2d');

  其中canvas.getContext(contextID)是方法返回一个用于在画布上绘图的环境。

  参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

  下面是对canvas对象相关属性及方法进行介绍。

  ① 图形的绘制

  1.矩形的绘制

   矩形的绘制有两种方法一是fill，这是一种实心得绘制，另一种为stroke绘制出的矩形为空心（只具有外边框）。

context.fillRect(x,y,width,height); 绘制实心得矩形  x为起点的横坐标，y为起点的纵坐标，width是这个矩形的宽度，height为这个矩形的高度。

context.strokeRect(x,y,width,height);绘制空心的矩形，参数意义同context.fillRect(x,y,width,height);
fillStyle和strokeStyle分别是对所绘制的矩形的实体和边框的颜色进行设置。
context.rect(x,y,width,height)绘制矩形

context.clearRect(x,y,width,height); 清空给定矩形内的指定像素。具体用法如下：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

　2.对圆形的绘制

     context.arc(x,y,r,sAngle,eAngle,counterclockwise);其中x为圆形横坐标，y为圆心纵坐标，r是圆的半径，sAngle起始角，以弧度计（以3点钟的方向为起点），eAngle是圆弧结束的角度，counterclockwise是对顺时针和逆时针进行设置，默认和true为顺时针。

   ②路径

     其中常用的为moveTo(x,y)和lineTo(x,y)

     moveTo(x,y)把路径移动到画布中的指定点，不创建线条。

     lineTo(x,y)添加一个新点，然后在画布中创建从该点到最后指定点的线条。

     beginPath() 方法开始一条路径，或重置当前的路径。请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

     closePath() 方法创建从当前点到开始点的路径。

     stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

     clip()方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

   3.渐变

//渐变线性变化的运用 需要使用到的对象为 creatLinearGradient（startX，stratY，endX，endY）
         //addColorStop（offset，color）offset是设定颜色离开渐变始点的偏移量，范围为0-1
            var li1 = context.createLinearGradient(0,0,0,200);
            li1.addColorStop(0,'black');
            li1.addColorStop(0.6,'yellow');
            li1.addColorStop(1,'green');
            context.fillStyle = li1;
            context.fillRect(400,0,300,200);
         //渐变径向绘制
        //需要用到的函数为createRadialGradient（startX,startY，radiusStart，endX，endY，radiuseEnd）
            var li2 = context.createRadialGradient(100,400,100,100,400,50);
            li2.addColorStop(0,'black');
            li2.addColorStop(0.6,'yellow');
            li2.addColorStop(1,'green');
            context.fillStyle = li2;
            context.fillRect(0,300,200,200)

  4.图形组合 

     

      context.globalCompositeOperation = type，其中type为以上值；

 5.图片

   首先，引入Image对象

 var image = new Image();
     image.src = './imgs/xg.jpg';

 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); img是规定要使用的图像、画布或视频。 sx，sy分别是开始剪切的 x ，y坐标位置，为可选参数。swidth,sheight分别是被剪切图像的宽度和高度，为可选参数。x,y分别是在画布上放置图像的 x 坐标位置。width,height分别是。要使用的图像的宽度和高度，为可选参数。（伸展或缩小图像）。
 
6.文字
Canvas对于绘制文字提供了两种方法 fillText(填充模式) 或 strokeText(边框模式)。 
   fillText(String, x, y, [maxWidth]); 
   strokeText(String, x, y, [maxWidth]);
   String为你要绘制的文字,x,y为文字的坐标最后有一个可选参数maxWidth,文字的最大宽度,防止文字在超出长度时,会显示错位。
   与绘制基本图形的步骤是一样的，首先要设置字体的样式 ： 
    font ： 文字字体，依据个人喜好了 
    textAlign ： 文字的水平对齐方式，值start(默认),end,left,right,center 
    textBaseline : 文字的垂直对齐方式,值top,hanging,middle,alphabetic(默认),ideographic,bottom 
    measureText(String) : 可以获取一个TextMetrices对象,他包含了文字绘制后的宽度
7.其他
  save()和restore()

     save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。

　　Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形(即移动，旋转和缩放，见下):

　　strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

　　你可以调用任意多次 save 方法。每一次调用 restore 方法，上一个保存的状态就从堆中弹出，所有设定都恢复。