html5学习之canvas

Canvas画布

1.绘图方法

ctx.moveTo(x,y) 落笔
ctx.lineTo(x,y) 连线
ctx.stroke() 描边

ctx.beginPath()； 开启新的图层

演示： strokeStyle="值"
线宽： linewidth="值" 备注：不需要带单位

线连接方式： lineJoin: round | bevel | miter (默认)

线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square

闭合路径： ctx.closePath()

☞ 线性渐变

   var grd=ctx.createLinearGradient(x0,y0,x1,y1);

      x0-->渐变开始的x坐标

      y0-->渐变开始的y坐标 

　　x1-->渐变结束的x坐标

　　y1-->渐变结束的y坐标

 

　　grd.addColorStop(0,"black"); 设置渐变的开始颜色

　　grd.addColorStop(0.1,"yellow"); 设置渐变的中间颜色

　　grd.addColorStop(1,"red"); 设置渐变的结束颜色

  　 ctx.strokeStyle=grd;

　　ctx.stroke();

 

备注：

  　addColorStop(offse,color);

　　中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数

 

☞ 径向渐变

 

   ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

　　　(x0,y0)：渐变的开始圆的 x,y 坐标

　　　r0：开始圆的半径

　　　(x1,y1)：渐变的结束圆的 x,y 坐标

　　　r1：结束圆的半径

 

填充效果

　　ctx.fill();  设置填充效果

　　ctx.fillstyle="值"; 设置填充颜色

 

非零环绕原则　【两个图是反向的】

　　1. 任意找一点，越简单越好

  　 2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）

      3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则不填充。

      4. 非零区域填充

 

绘制虚线

 

　　原理：

　　　　设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系

　　　　例如： [10,10] 实线部分10px 空白部分10px

　　　　例如： [10,5] 实线部分10px 空白部分5px

　　　　例如： [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px....

　　　　绘制：

　　　　　　ctx.setLineDash(数组);

　　　　　　ctx.stroke();

 

　　例如：

  　　　　ctx.moveTo(100, 100);

     　　　ctx.lineTo(300, 100);

     　　　ctx.setLineDash([2,4]);

    　　　 ctx.stroke();

　　注意：　　

　　　　如果要将虚线改为实线，只要将数组改为空数组即可。

 

绘制动画效果

　　☞ 绘制一个描边矩形： content.strokeRect(x,y,width,height)

　　☞ 绘制一个填充矩形： content.fillRect(x,y,width,height)

　　☞ 清除：     content.clearRect(x,y,width,height)

 

 

　　☞ 实现动画效果：

  　　　　1. 先清屏

  　　　　2. 绘制图形

  　　　　3. 处理变量

 

绘制文本

 

　　☞ 绘制填充文本

   　　content.fillText(文本的内容,x,y)

 

　　☞ 绘制镂空文本

   　　content.strokeText();

  

　　☞ 设置文字大小：

  　　 content.font="20px 微软雅黑"

  　　备注： 该属性设置文字大小，必须按照cssfont属性的方式设置

  

　　☞ 文字水平对齐方式【文字在圆心点位置的对齐方式】

    　　content.textalign="left | right | center"

 

　　☞文字垂直对齐方式

     　　content.textBaseline="top | middle | bottom | alphabetic(默认)"

 

　　☞文字阴影效果

     　　 ctx.shadowColor="red"; 设置文字阴影的颜色

　　　　ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量

　　　　ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量

　　　　ctx.shadowBlur=值; 设置文字阴影的模糊度

 

绘制图片

　　☞

　　　//将图片绘制到画布的指定位置

　　　content.drawImage(图片对象,x,y);

　　☞

   　　//将图片绘制到指定区域大小的位置 x,y指的是矩形区域的位置，width和height指的是矩形区域的大小

　　　content.drawImage(图片对象,x,y,width,height);

 

　　☞

   　　//将图片的指定区域绘制到指定矩形区域内

　　　content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);

 　　　sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是值 截取图片区域的大小

         dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小

 

　　☞

  　　 解决图片绘制到某一个区域的按原比例缩放绘制：

　　　绘制宽：绘制高==原始宽：原始高

 

绘制圆弧

 

  　　特殊值

　　　　0度 = 0弧度

　　　　30度 = π/6 (180度的六分之一)

　　　　45度 = π/4

　　　　60度 = π/3

　　　　90度 = π/2

　　　　180度 = π

　　　　360度 = 2π

 

 

　　☞ 绘制圆上任意点：  

  　　　　公式：

　　　　　　x=ox+r*cos( 弧度 )

　　　　　　y=oy+r*sin( 弧度 )

　　　　　　ox: 圆心的横坐标

　　　　　　oy: 圆心的纵坐标

　　　　　　r： 圆的半径

 

平移【坐标系圆点的平移】

　　ctx.translate(x,y);

　　特点：

　　　　通过该方法可以将原点的位置进行重新设置。

　　注意：

　　　　1. translate(x,y) 中不能设置一个值

　　　　2. 与moveTo(x,y) 的区别：

　　　　moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变

　　　　translate(x,y) 是将坐标系中的原点位置发生改变

 

旋转【坐标系旋转】

 

　　ctx.rotate(弧度)

 

 

伸缩

　　ctx.scale(x,y)

 

　　备注：

　　　　沿着x轴和y轴缩放

　　　　x,y 为倍数 例如： 0.5 1