html5 canvas

<canvas>标签就是一块画布。通俗点说，就是用<script>脚本来绘图的草稿纸。ie9以及其他的一些浏览器都支持该标签。

<canvas>本身是没有绘图能力的，所有的绘图操作都必须在javascript中完成。

js在<canvas>上绘图的方式：

 （1）获取canvas对象：var c = document.getElementById("xxxxx");

  （2）创建context对象：var ctx = c.getContext("2d");

  （3）绘制矩形

           ctx.fillStyle="XXXX";

           ctx.fillRect(0,0,x,y);

          绘制直线

           ctx.moveTo(0,0);（起点）

           ctx.lineTo(x,y);（终点）

          在canvas中绘制圆形

          ctx.beiginPath();

           arc(x,y,r,start,stop);

           ctx.stroke();

           在canvas中绘制文本

           font定义字体 ctx.font="xxxx";

           fillText(text,x,y);在canvas上绘制实心的文本；

           strockText(text,x,y);在canvas上绘制空心的文本；

           绘制线形渐变

           var grd =  ctx.createLinearGradient(x,y,x1,y1);

           grd.addColorStop(0,"red");

           grd,addColorStop(1,"yellow");

           grd.fillStyle()=grd;

           grd.fillRect(x,y,x1,y1);

           绘制径向渐变

           var grd = ctx.createRadialGradient(x,y,r,x1,y1,r1);

           grd.addColorStop(0,"red");

           grd,addColorStop(1,"yellow");

           grd.fillStyle()=grd;

           grd.fillRect(x,y,x1,y1);

           放图片

           var img = document.getElementById("id");

           img.onload = function(){

                  ctx.drawImage(img,10,10);

          }