案例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. html文字有光晕

    <style> .tb{ font-size:40px; filter:glow(color=pink,direction=); font-family:华文行楷; } </styl ...

  2. IOS APP IDs

    感谢分享 说下 APP ID 的组成为  APP ID Prefix + APP ID suffix APP ID Prefix 为10个字符  你不用管它 APP ID Suffix  这个有点讲究 ...

  3. windows 2003 远程桌面 连接输入账号密码后，只能看见蓝色屏幕和鼠标

    具体解决方案参考的 http://www.tomshardware.com/forum/171045-46-remote-desktop-connection-blank-desktop   to s ...

  4. css3 之表格隔行分色显示

    <html> <head> <title></title> <style type="text/css"> table{ ...

  5. Android 把从网络获取的图片缓存到内存中

    1:activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...

  6. LINQ 学习笔记(1)

    学习资源参考 : http://www.cnblogs.com/lifepoem/archive/2011/12/16/2288017.html 常用方法是 Where, OrderBy, Selec ...

  7. ural 1207 Median on the Plane

    极角排序 #include <cstdio> #include <cstring> #include <algorithm> #include <cmath& ...

  8. 51单片机 Keil C 延时程序的简单(晶振12MHz,一个机器周期1us.)

    一. 500ms延时子程序 void delay500ms(void) { unsigned char i,j,k; ;i>;i--) ;j>;j--) ;k>;k--); } 产生 ...

  9. Stack的三种含义（数据超过栈的大小，就发生stack overflow）

    非常典型的基础知识,转自http://www.ruanyifeng.com/blog/2013/11/stack.html 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈& ...

  10. android AudioRecorder简单心得

    1.如何创建一个有效的AudioRecorder实例 Android各种设备的采样频率不同,输入的声道数也不同,如果采用固定的采样频率和声道数,那么得到的AudioRecorder不一定能够正常初始化 ...