首先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);