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 ...
随机推荐
- C#中out的一种用法
1.当希望方法返回多个值时,声明out 方法很有用. 这样使方法可以有选择地返回值. using System; using System.Collections.Generic; using Sys ...
- Swift—Core Foundation框架-备
Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风格的API比较麻烦,但是在OS X和iOS开发 ...
- Android事件监听器Event Listener
在 Android 中,我们可以通过事件处理使UI与用户互动(UI Events). UI的用户事件处理,即View处理用户的操作,在应用程序中几乎不可避免.View是重要的类,它是与用户互动的前线: ...
- [JavaScript] JavaScript作用域深度解析
JavaScript作用域 JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里. -- JS权威指南 在JS里,一切皆对象,函数也是. 一.有什么用 什么时候会用到它? ...
- 微信支付开发+{ping++}微信支付托管
------------------------微信支付接口------------------------------- 微信支付开发并没有想象中的那么难,主要是微信提供了sdk. 微信公众号必须是 ...
- android merge 标签的使用
<merge xmlns:android="http://schemas.android.com/apk/res/android"> <ToggleButton ...
- css属性之@media
Base Browsers: IE6.0+, Firefox2.0+, Chrome4.0+, Safari6.0+, Opera15.0+ <expression>:指定媒体查询使用的媒 ...
- BZOJ3315: [Usaco2013 Nov]Pogo-Cow
3315: [Usaco2013 Nov]Pogo-Cow Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 143 Solved: 79[Submit] ...
- 【转】Win8/8.1/Win7小技巧:揪出C盘空间占用的真凶
原文网址:http://www.ithome.com/html/win8/55496.htm 不少使用Win8.Win8.1的用户不难发现,原先只占用20G大小的系统盘,随着使用时间的增加,C盘的磁盘 ...
- 《SDN核心技术剖析和实战指南》2.2OpenFlow交换机规范小结
这节的内容相当多,主要是介绍OpenFlow标准特别是流表的相关特性. 典型的OpenFlow标准由三部分组成:安全通道,流表和OpenFlow协议.注意这个标准是一份设备标准,并不单指OpenFlo ...