zoukankan      html  css  js  c++  java
  • HTML5学习笔记(3)——canvas图片

      在canvas有关于图片的操作中最主要也是最重要的就是drawImage函数了,所以我们只要掌握了drawImage的用法也就基本掌握了canvas有关于图片的操作了。

      drawImage()函数一共有以下三种形式:

      1.drawImage(image,dx,dy)    接受一个image图片,并将该图片绘制到canvas中。image可以是已经存在的<img>元素,或者是通过Javascript创建的图片元素;给出的坐标(dx,dy)代表图片左上角的位置。

      2.drawImage(image,dx,dy,dw,dy)   接受一个image图片,将其缩放为宽度为dw和高度为dy,然后把它绘制到canvas上的(dx,dy)位置。

      3.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)  接受一个图片,通过参数(sx,sy,sw,sh)指定图片的裁剪位置,缩放到(dw,dh)的大小,最后把它绘制到canvas上的(dx,dy)位置。这个有点类似于css sprite背景定位技术,不过这个比css sprite更具有灵活性。

      下面给大家讲解一个例子,让大家对drawImage这三种有更深刻的掌握。

      在此之前,们先在images文件夹中准备两张图片,分别为duck.png和micky.png,duck.png中为一只唐老鸭,micky.png中有三只米老鼠,如下图(1)、图(2)所示:

    图(1) duck.png

    图(2)micky.png

      以下代码将全面地给大家演示drawImage的三种用法:

    //利用已有的<img>创建图像
    var canvas = document.getElementById("e"); //得到已有canvas元素的节点
    var context = canvas.getContext("2d"); //设置canvas元素节点
    var duck = document.getElementById("duck"); //得到已有<img>元素的节点
    context.drawImage(duck,0,0); //drawImage用法1,image为已有的<img>元素
    //
    利用Image()类来创建图像
    var duck2 = new Image();
    duck2.src="images/duck.png";
    context.drawImage(duck2,0,250); //drawImage用法1,image通过Javascript创建的元素

    //缩小版的鸭子
    context.drawImage(duck2,0,500,160/2,226/2); //drawImage用法2,图片的大小为原来的1/2

    //米老鼠
    var micky = new Image();
    micky.src="images/micky.png";
    context.drawImage(micky,250,0); //全部显示出来
    context.drawImage(micky,175,0,175,226,250,250,175,226); //drawImage用法3,截取出第二只米老鼠
    context.drawImage(micky,350,0,180,226,450,250,180*1.4,226*1.4); //drawImage用法3,截取出最后一只米老鼠,并且放大到1.4倍

      那么在chrome中的运行结果如下:

      到此为止,HTML5当中的图片绘制的drawImage用法就给大家介绍完了。

      demo演示地址:http://xiaowu.shnow.cn/html5/note3/index.html



  • 相关阅读:
    防火墙透明模式
    HP管理工具System Management Homepage安装配置
    kbmmw 中JSON 中使用SQL 查询
    kbmmw 中JSON 操作入门
    第一个kbmmw for Linux 服务器
    kbmmw 5.02发布
    kbmmw 5.01 发布
    使用delphi 10.2 开发linux 上的Daemon
    使用unidac 在linux 上无驱动直接访问MS SQL SERVER
    使用delphi 10.2 开发linux 上的webservice
  • 原文地址:https://www.cnblogs.com/pgg200/p/2190700.html
Copyright © 2011-2022 走看看