HTML5技术

【canvas学习笔记五】使用图片 - 池月

字号+ 作者:H5之家 来源:H5之家 2017-08-25 16:01 我要评论( )

在canvas里画图有两个步骤: 获得图片源。 drawImage()画图。 图片源 canvas支持以下几种图片资源: HTMLImageElement 可以使用Image()方法构造的图片,也可以是HTML的 元素。 HTMLVideoElement 可以使用HTML的 HTMLCanvasElement 可以将另一个canvas作为图

在canvas里画图有两个步骤:

  • 获得图片源。
  • drawImage()画图。
  • 图片源

    canvas支持以下几种图片资源:

  • HTMLImageElement
    可以使用Image()方法构造的图片,也可以是HTML的

    元素。
  • HTMLVideoElement
    可以使用HTML的
  • HTMLCanvasElement
    可以将另一个canvas作为图片资源。

    获得图片

    如何获得页面中的

  • ().

    脚本开始执行以后,图片就开始加载。
    这里需要注意的是,如果图片还没加载完成就用drawImage()方法绘制图片的话,将什么都画不出来,如果是旧版浏览器,还会抛出错误。所以,绘图的时候要确保图片已经加载完成。

    ().() )

    如果是只要加载一张图片的话,这个方法是不错的。但是如果有很多图片要加载的话,这个方法就不好了,需要使用到图片预加载的技巧,这个技巧放在后面讲。
    我们也可以使用Base64编码将图片嵌在代码里。

    ().

    绘制图片

    drawImage(image, x, y)

    image是图片引用,x, y是要绘制的图片的左上角的坐标。

    最简单的例子

    ctx img ()() ).)))).

    结果

    image

    设置图片大小

    drawImage(image, x, y, width, height)

    drawImage方法也可以指定图片的宽度和高度,缩放图片。

    例子

    ctx img ()() i ij ji ).

    结果

    image

    裁剪

    drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

    各参数的说明看下图:

    image

    例子

    canvas ctx .).); }

    在这个例子中,使用了

    标签来作图片源。
    如果在CSS中将

    标签设置为隐藏,那么输出的结果图片将不可见。

    结果

    image

    光滑

    缩放图片可能会造成图象模糊等问题,可以通过 imageSmoothingEnabled属性来控制光滑算法。默认这个属性的值是true。

     

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

    相关文章
    • HTML5 Canvas - 救火队长

      HTML5 Canvas - 救火队长

      2017-08-24 16:05

    • Go语言学习笔记(八)golang 操作 Redis Mysql RabbitMQ - 索宁

      Go语言学习笔记(八)golang 操作 Redis Mysql RabbitMQ - 索宁

      2017-08-24 09:03

    • ECMAScript 6 学习 let 和 const命令 - suisuisui

      ECMAScript 6 学习 let 和 const命令 - suisuisui

      2017-08-24 09:03

    • Canvas放置反弹效果随机图形 - 紫菜、

      Canvas放置反弹效果随机图形 - 紫菜、

      2017-08-17 16:00

    网友点评
    S