案例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     window.onload=function(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            var image= new Image();
            image.src="shanchu.png";
            cxt.drawImage(image,0,0);
        }
    </script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>

</body>
</html>

效果图：

注释：

（1）绘制图像时，需要使用drawImage方法：

方法1：cxt.drawImage(image,x,y);

image是一个Image对象，用该对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。

方法2：cxt.drawImage(image,x,y,w,h);

前三个参数同上，w,h是指绘制时的图像的宽度与高度。

方法3：cxt.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

sx与sy分别表示源图像的被复制区域在画布中的起始横坐标与起始纵坐标，sw与sh表示被复制区域的宽度与高度，dx与dy表示复制后的目标图像在画布中的起始横坐标与起始纵坐标，dw与dh表示复制后的目标图像的宽度与高度。该方法可以只复制图像的局部，只要将sx与sy设为局部区域的起始点坐标，将sw与sh设为局部区域的宽度与高度就可以了。

案例2：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     window.onload=function(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            var image= new Image();
            image.src="shanchu.png";
            cxt.drawImage(image,0,0,200,200);
            cxt.drawImage(image,0,0,100,100,210,0,200,200);
        }
    </script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>

</body>
</html>

效果图：


案例3：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     window.onload=function(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            var image= new Image();
            image.src="shanchu.png";
            drawImage(cxt,image);
        }
     function drawImage(cxt,image)
     {
         var i=0;
         for(i=0;i<5;i++)
         {
             cxt.drawImage(image,0+i*50,0+i*30,100,100);
         }
      }
    </script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>

</body>
</html>

效果图：


图像平铺

案例1：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
     window.onload=function(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            var image= new Image();
            image.src="shanchu.png";
            var ptrn=cxt.createPattern(image,'repeat');
            cxt.fillStyle=ptrn;
            cxt.fillRect(0,0,450,350);
        }
    </script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>

</body>
</html>
效果图：


注释：
（1）cxt.createPattern(image,type);
         该方法使用两个参数，image参数为要平铺的图像，type参数的值必须是下面的字符串值之一：
         no-repeat：不平铺
         repeat-x：横方向平铺
         repeat-y：纵方向平铺
         repeat：全方向平铺
 

HTML5画布（图像）的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  3. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  4. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  5. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  6. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  7. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  8. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  9. HT for Web基于HTML5的图像操作（三）

    上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http ...

随机推荐

  1. OpenStack协同并发 eventlet

    今天听easystack一哥们讲nova协同并发,结合自己之前的认识.回顾一下openstack eventlet. OpenStack作为热门的开源云平台,本身代码当然得支持高并发. 首先讲讲pyt ...

  2. FCKEditor的用法(asp版)

    1:下载FCKEditor 去www.baidu.com 搜索,我本来想上传的,但不知道怎么传.下载下来后解压到你网站的目录,最好就放在根目录下,文件夹名字就用FCKEditor:这里可以随便自己喜好 ...

  3. console调试--转

    目录: 一.什么是 Console 二 .什么浏览器支持 Console 三.为什么不直接使用 alert 或自己写的 log 四.console.log(object[,object,.....]) ...

  4. akka简单示例-2

    手动敲了一遍计算pi的示例:http://www.gtan.com/akka_doc/intro/getting-started-first-scala.html 有个笔误,花了半个小时定位. [To ...

  5. ural 1671 Anansi's Cobweb

    这道题是并差集的简单应用 #include <cstdio> #include <cstring> #include <algorithm> #define max ...

  6. ViewConfiguration滑动参数设置类

    /** * 包含了方法和标准的常量用来设置UI的超时.大小和距离 */ public class ViewConfiguration { // 设定水平滚动条的宽度和垂直滚动条的高度,单位是像素px ...

  7. Linux下的QQ折腾记

        用Linux最重要是要把QQ装好了,webqq很不好用.qq for linux是古董,Linux还是悲惨,很多软件有windows版本,有mac版本,就是不出linux版本.只好用wine来 ...

  8. oschina大数据开源软件

    Hadoop 图形化用户界面 Hue 大数据可视化工具 Nanocubes 企业大数据平台 RedHadoop 大数据查询引擎 PrestoDB Hadoop集群监控工具 HTools 安全大数据分析 ...

  9. Windows 注册表操作

    经常操作注册表,然后得到一份操作注册表函数实现.这里备份下. #ifndef _REGEDIT_H #define _REGEDIT_H int RegRead_S (struct HKEY__*Re ...

  10. WC2015流水账

    THU那四场考试没考好,只有20+名.这也许是我OI生涯中最后一场吧(已确认是最后一场),真是感慨万千. day0 搬进浙大宿舍404房间(神房间号),四个人一间.中午发现学军伙食相当良心,是我参加的 ...