canvas 的一些简单运用

首先canvas作为html5新出现的标签，也像其他所有dom对象一样有他自己本身的属性、方法和事件，其中就有绘图的方法，然后用我们可以用js调用它来进行绘图  语法 例：

<canvas id="myCanvas" width="400" height="400"></canvas>

可以看到canvas元素自身也有两个属性 width 和height 此外也有其他的html的一些主要属性 比如  class  id   name 等

在这里 JavaScript就是使用这里创建的canvas的id来表示要在上面绘画的画布。 方法如下：

var cvs = document.getElementById("myCanvas");
//IE 6 7 8 不支持 <canvas>标签

每个画布都必须有一个context（上下文）的定义。一般情况下官方规范只承认一种2D环境；

var ctx = cvs.getContext("2d");

之后我们就可以进行绘画了

Canvas的坐标

分为x y  （从0开始  想右向下 x y 都为正数  不能为负   负的话 超出画布 就不会显示了）

一些相关语法

ctx.beginPath() ：开始一个路径

ctx.moveTo(x,y)： 路径移到画布中的指定点 , 即起点

ctx.lineTo(x,y) ：添加一个新点，画线 ......

ctx.closePath() ：关闭绘制路径

ctx.fillStyle：用来设置填充颜色

ctx.fill() ：填充已定义好的路径

ctx.lineWidth：画线的宽度

ctx.strokeStyle：用来设置描边颜色

ctx.stroke() ：绘制已定义好的路径

矩形绘制

rect(x,y,w,h)： x、y为起始坐标，w、h为矩形的宽、高 支持这么写： ctx.fillRect(x,y,w,h)   及   ctx.strokeRect(x,y,w,h)

圆形绘制

arc(x,y,r,sa,ea,true/false)： x、y为圆心坐标，r为半径， sa、ea分别为起始角度和结束角度， true是逆时针画圆，false是顺时针画圆； 360度角即2PI弧度，1度就是2PI/360=PI/180弧度， 90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)

绘制文字

fillText(text,x,y,maxWidth): 填充绘制 text表示文字      x、y为坐标 maxWidth可选，为文字最大宽度，防止文字溢出 strokeText(text,x,y,maxWidth): 描边绘制 text表示文字      x、y为坐标 maxWidth可选，为文字最大宽度，防止文字溢出；

常用属性设置： font 文本内容的当前字体属性 示例: ctx.font = 'bold 60px 微软雅黑';（顺序不能改） textAlign 文本内容的当前对齐方式（一般不需要） 示例: ctx.textAlign="left";   ctx.textAlign="right"; （左右是根据你定的xy坐标来定的-左-最左边在坐标；右-最右边在坐标   ↓上下文本基线一样性质） textBaseline 绘制文本时使用的当前文本基线 示例: ctx.textBaseline="middle"; ctx.textBaseline="top";  ctx.textBaseline="bottom";

*号为重点：    

1、系统默认在绘制第一个路径的开始点为beginPath    

*2、如果画完前面的路径没有重新指定beginPath， 那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制    

3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和 结束点相连，接着填充封闭的部分   *记住每次画路径都在前后加context.beginPath()    和context.closePath()就行

 

清除画布：

 ctx.clearRect(x,y,width,height):

x : 清除起点横坐标

y : 清除起点纵坐标

width : 清除长度

height : 清除高度

清除画布： ctx.clearRect(0,0,cvs.width,cvs.height);