HTML5画布（图像）
案例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画布（图像）的更多相关文章
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 使用HTML5画布（canvas）生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- html5画布基础
canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...
- HTML5画布Canvas
一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...
- HTML5 画布参考
描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...
- HTML5画布实现方法：
我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...
- HT for Web基于HTML5的图像操作（三）
上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http ...
随机推荐
- Dom4j修改xml文档
1. 写出内容到xml文档 XMLWriter writer = new XMLWriter(OutputStream, OutputForamt) wirter.write(Document); 2 ...
- DEIVER_OBJECT结构参数
typedef struct { PDEVICE_OBJECT DeviceObject; //指向驱动程序创建的设备对象 PUNICODE_STRING HardwareDatabase; //记录 ...
- 003-C运算符
运算符 C语言有34种运算符,常见的有加减乘除. 1>算术运算符 1.加 10+2 2.减 20-2 3.乘 12*2 4.除 10/2 5.取余 10%3 = 1; 10%-3 = 1; -1 ...
- 03 - 替换vtkDataObject中的GetProducerPort()方法 VTK 6.0 迁移
VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的一个方法就是GetProducerPort(). 一般,先前使用这个方法如下例子: vtkPolyD ...
- nodejs定时任务node-schedule
1:使用npm安装node-schedule模块 npm install node-schedule (1)每隔5分钟执行一次: var schedule = require('node-schedu ...
- Linux/Ubuntu下 静态编译Qt程序
一般情况下,我们用Qt编译出来的程序是要依赖于系统Qt库的,也就是这个程序移到别的没有安装Qt库的系统上是不能使用的.会提示缺少……库文件之类的错误.这就是动态编译的结果. 但是如果我们想编译一个程序 ...
- JavaScript 中的非真值
False values 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("& ...
- 【转】 Spinner的常用技巧
原文网址:http://blog.csdn.net/wanli_smile/article/details/6410388 用法 1 :以资源方式,静态展示 Spinner 选项 1. 在资源 ...
- C# winform如何清除由Graphics类绘制出来的所有线条或图形
在C#winform应用程序中,可以用GDI绘制出线条或图形. 1.在主窗体上绘制线条或图形 using (Graphics g = this.CreateGraphics()) { ...
- 查看db2表空间使用率
select char(TABLESPACE_NAME,16) tablespace_name,decimal(PAGE_SIZE/1024,4,2) page,used_pages*100/usab ...