首页 > 代码库 > 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绘图