首页 > 代码库 > HTML5 十大新特性(四)——Canvas绘图
HTML5 十大新特性(四)——Canvas绘图
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绘图