案例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. 06 - 从Algorithm 算法派生类中删除ExecuteInformation() 和ExecuteData() VTK 6.0 迁移

    在先前的vtk中,如vtkPointSetAlgorithm 等算法派生类中定义了虚方法:ExecuteInformation() 和 ExecuteData().这些方法的定义是为了平稳的从VTK4 ...

  2. ViewPager+Fragment的结合使用，实现QQ界面的理解

    http://www.cssxt.com/html/2449/2449.html 效果如图: 实现代码解析:MainActivity.java1.引入布局文件2.4个标题控件的初始化以及点击事件的监听 ...

  3. 【转】三星8552 手机提示升级系统 完成后重启 开机画面一直停留在三星的LOGO 一闪一闪 怎么办

    原文网址:http://ask.zol.com.cn/q/309501.html 楼主你好,手机出现这种情况的话,可以先将电池取下来重新安装,如果不能的话,可以在关机状态下按住电源键+音量下键之后进入 ...

  4. iOS 9之New UIKit for International User Interfaces

    金田 Apple一直是注重用户体验的典范,而此次在UI上面,更是做到极致.此次iOS 9的发布能完全支持阿拉伯语.希伯来语等书写和阅读方式为从右向左的语言环境.不仅仅是简单的基础文本,而是支持将界面翻 ...

  5. Bozo排序

    Bogo的变种,继续卖萌... Bogo每次都随机打乱数组,而Bozo每次随机选择两个位置,然后交换这两个位置的值.相同的是不断靠概率不断查看有序了没... public static void bo ...

  6. Power(int base, int exponent) 函数实现

    这个是个高效的算法,时间复杂度为 O(logn) 原理: a的n次方: #include<iostream> #include<cmath> using namespace s ...

  7. java，大数据批量插入、更新

    public void exec(Connection conn){ try { conn.setAutoCommit(false); Long beginTime = System.currentT ...

  8. iOS--创建uiscrollview

    //创建uiscrollview self.PageHeight = self.view.bounds.size.height; self.PageWidth = self.view.bounds.s ...

  9. javascript中子类如何继承父类

    参考阮一峰的文章:http://javascript.ruanyifeng.com/oop/inheritance.html#toc4 function Shape() { this.x = 0; t ...

  10. 【iOS基础】iOS 线程相关技术

    零.线程的注意点(掌握)1.不要同时开太多的线程(1~3条线程即可,不要超过5条)2.线程概念1> 主线程 : UI线程,显示.刷新UI界面,处理UI控件的事件2> 子线程 : 后台线程, ...