案例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. CentOS安装MySQL问题汇总

    遇到的错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) denied for ...

  2. lua编码转换

    lua编码转换, 这个要记录下:http://www.lpfrx.com/archives/4918/ ,总是觉得lua没python甘方便,应该说没这么顺手吧,可能先入为主吧,python库多, 编 ...

  3. Cracking the coding interview--Q1.7

    原文 Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column are s ...

  4. Activity和Servlet的相似之处和区别

    相似之处:1.Activity.Servlet的职责都是向用户呈现界面.2.开发者开发Activity.Servlet都继承系统的基类.3.Activity.Servlet开发出来之后都需要进行配置. ...

  5. android ids.xml资源的使用

    ids.xml文件例子: XML file saved at res/values/ids.xml: 使用方式: 一:

  6. 黑马程序员_JavaIO流（三）

    字节流File读写操作 字符流: FileReader FileWriter BufferedReader BufferedWrtier 字节流: FileInputStream FileOutput ...

  7. android调用系统自带的的浏览器搜索关键字

    //调用系统的浏览器搜索详情 public void jumpBrowser(String value) { /* 取得网页搜寻的intent */ Intent search = new Inten ...

  8. C++Memset误区

    Memset的原型是void *memset(void *s, char ch, size_t n); Memset是按字节赋值的,对char以外的类型赋0(00000000) -1(11111111 ...

  9. MySQL的数据库引擎的类型

    你能用的数据库引擎取决于mysql在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型INNO ...

  10. (转)Apple Push Notification Services in iOS 6 Tutorial: Part 2/2

    转自:http://www.raywenderlich.com/32963/apple-push-notification-services-in-ios-6-tutorial-part-2 Upda ...