canvas教程

玩转html5lt;canvasgt;画图(3)

字号+ 作者:H5之家 来源:H5之家 2016-11-28 15:00 我要评论( )

设置像素颜色:context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 对imagedata数组中的各个像素的r、g、b、a值进行修改,再调用putImageData方法进行绘制 imagedata:修改后的imagedata

设置像素颜色:context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) 
    对imagedata数组中的各个像素的r、g、b、a值进行修改,再调用putImageData方法进行绘制

        imagedata:修改后的imagedata

        dx:重绘图像的起点横坐标(重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉,看起来就像是原来的图像变成现在的图像一样)

        dy:重绘图像的起点纵坐标

        //以下可选参数,设置重绘的矩形范围,如果缺省,默认会重绘所有的imegedata

        dirtyX:矩形左上角x轴坐标

        dirtyY:矩形左上角y轴坐标

        dirtyWidth:矩形长度

        dirtyHeight:矩形高度

itdadao

绘制文字

填充文字:context.fillText(text,x,y)  

绘制文字轮廓 context.strokeText(text,x,y)

     text:要绘制的文字

     x:文字起点的x坐标轴

     y:文字起点的y坐标轴

     context.font:设置字体样式

     context.textAlign:水平对齐方式

          start、end、right、center

     context.textBaseline:垂直对齐方式

          top、hanging、middle、alphabetic、ideographic、bottom

     var length=context.measureText(text):计算字体长度(px)那么能不能计算高度啊,很遗憾,不能

itdadao

保存和恢复状态 

保存:context.save()

恢复:context.restore()

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Canvas入门-利用Canvas画国旗

    Canvas入门-利用Canvas画国旗

    2016-10-22 12:01

  • Windows 下成功安装node

    Windows 下成功安装node

    2016-09-19 17:04

  • clock 简单canvas实现圆弧时钟

    clock 简单canvas实现圆弧时钟

    2016-09-15 10:01

  • 基于HTML5 Canvas实现雨滴效果: Rainday.js

    基于HTML5 Canvas实现雨滴效果: Rainday.js

    2016-09-13 11:00

网友点评
m