案例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. C程序设计语言练习题1-15

    练习1-15 重新编写1.2节中的温度转换程序,使用函数实现温度转换计算. 代码如下: #include <stdio.h> // 包含标准库的信息. float fahrToCelsiu ...

  2. 将日志写入Debug窗口

    定义在NuGet包“Microsoft.Extensions.Logging.Debug”中的DebugLogger会直接调用Debug的WriteLine方法来写入分发给它的日志消息.如果需要使用D ...

  3. New ipad install Metasploit(New ipad 安装Metasploit)

    Title:New ipad install Metasploit(New ipad 安装Metasploit) --2012-09-19 11:35 越狱以后,Ssh或者终端Ipad,把屏幕锁定最好 ...

  4. MCS51浮点计算程序

    MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEEE转换,在上位机直接显示. ;这是本人使用的MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEE ...

  5. 8.2.1.4 Index Merge Optimization 索引合并优化:

    8.2.1.4 Index Merge Optimization 索引合并优化: 索引合并方法是用于检索记录 使用多个 范围扫描和合并它们的结果集到一起 mysql> show index fr ...

  6. MFC单文档自定义扩展名及添加图标报Assertion错误

    忽然无聊的想给自己写的程序保存的文件使用自己的名字简写作为后缀,于是有了下文. IDR_MAINFRAME格式介绍 IDR_MAINFRAME字符串资源中包含7个子串,分别以/n结束,即如下格式: & ...

  7. Response.Expires 属性 （转载于疯狂客的BLOG）

    Expires 属性 Expires 属性指定了在浏览器上缓冲存储的页距过期还有多少时间.如果用户在某个页过期之前又回到此页,就会显示缓冲区中的版本 语法 Response.Expires [= nu ...

  8. Contest - 第10届“新秀杯”ACM程序设计大赛网络资格赛 赛后信息（晋级名单·正式版）

    2014_acm_fresh_0057 刘畅 20131620 2014_acm_fresh_0099 汪哲 20132185 2014_acm_fresh_0086 陈顺 2014111776 20 ...

  9. 【调试技巧】FireFox作为移动端的设置

    1.在地址栏输入“about:config”,按下回车进入设置菜单. 2.找到“general.useragent.override”,如果没有这一项,则点右键“新建”->“字符串”,输入这个字 ...

  10. HDU 蟠桃记

    蟠桃记 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissio ...