HTML5 十大新特性(四)——Canvas绘图

标签：pat   直线   txt   alpha   垂直   保存绘图   上下   font   html   

　　H5引入了canvas标签，默认是一个300*150的inline-block。canvas的宽高只能用它自身的width和height属性来指定，而不能使用css样式中的width、height。

　　一、获得‘画笔’对象，canvas所有的任务都需要它来执行

　　　　var ctx=canvas.getContext(‘2d‘);

　　二、一些canvas常用的属性

　　　　fillStyle：填充样式

　　　　strokeStyle：描边样式

　　　　lineWidth：描边宽度

　　　　font：绘制文本所用的字体大小和类型

　　　　textBaseline：文本对其的基线

　　　　shadowOffsetX、shadowOffsetY：阴影偏移量

　　三、使用canvas绘制图形

　　　　1、绘制矩形

　　　　ctx.fillRect(x,y,w,h)：填充一个矩形

　　　　ctx.strokeRect(x,y,w,h)：描边一个矩形

　　　　ctx.clearRect(x,y,w,h)：清除一个矩形范围内的内容

　　　　2、绘制文本

　　　　ctx.fillText(txt,x,y)填充文本

　　　　ctx.strokeText(txt,x,y)描边文本

　　　　ctx.measureText(txt)测量

　　　　*要注意的是文本的定位点默认在文本基线(alphabetic)的起始点！

　　　　3、为图形文字添加阴影

　　　　例：ctx.shadowColor=‘#000‘;//颜色

　　　　　　ctx.shadowOffsetX=8;//水平偏移量

　　　　　　ctx.shadowOffsetY=8;//垂直偏移量

　　　　　　ctx.shadowBlur=10;//模糊半径

　　　　4、在绘图时使用渐变色

　　　　ctx.createLinearGradient(x1,y1,x2,y2)：创建线性渐变对象

　　　　ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：创建径向渐变对象

　　　　ctx.addColorStop：添加颜色点

　　　　5、绘制路径

　　　　ctx.beginPath()：开始路径

　　　　ctx.closePath()：结束路径

　　　　ctx.moveTo(x,y)：移动到指定点

　　　　ctx.lineTo(x,y)：绘制直线路径到指定点

　　　　ctx.arc()：绘制拱形路径

　　　　ctx.ellipse()：绘制椭圆路径

　　　　ctx.bezierCurveTo()：绘制贝塞尔曲线路径

　　　　ctx.linJoin()：修改折线拐点处样式

　　　　6、绘制图像

　　　　ctx.drawImage()

　　　　7、对于绘制上下文状态的改变和修改

　　　　ctx.translate(x,y)：坐标轴原点移动到指定点

　　　　ctx.rotate()：旋转画笔

　　　　ctx.scale()：画笔缩放

　　　　ctx.save()：保存绘图上下文当前的变形数据

　　　　ctx.restore()：恢复最近一次的保存的变形相关的状态

　***Canvas是个纯js实现的绘制位图的技术。

HTML5 十大新特性(四)——Canvas绘图

标签：pat   直线   txt   alpha   垂直   保存绘图   上下   font   html   

原文地址：http://www.cnblogs.com/patcher/p/6241148.html