HTML5画布(图像)
2024-05-11 11:02:26
案例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:全方向平铺
最新文章
- UVA 624CD(01背包输出 + 输出路径)
- objective-c第七章课后练习2
- error LNK2019: 无法解析的外部符号 _WinMain@16,该符号在函数 ___tmainCRTStartup 中被引用
- Stream/Bytes[]/Image对象相互转化
- PageImpl是不是有问题?
- leetcode:Plus One
- Linux下Nginx+Tomcat整合的安装与配置
- Node安装与环境配置
- 初试mysql存储过程&;触发器
- paramiko模块实现堡垒机
- Whitespace character
- 跨域文件crossdomain.xml在weblogic上的部署
- JavaScript之Map对象
- css清除浮动的3种方式
- !/usr/bin/env python和!/usr/bin/python的区别
- tomcat优化之安装并配置apr库
- python技巧 列表推导
- 使用InstallAnywhere7.1制作Java exe程序安装包
- vue总结2
- Objective-C语法之指针型参数
热门文章
- 魔法方法:构造和析构 - 零基础入门学习Python041
- 使用Jstl异常:The absolute uri: http://java.sun.com/jsp/jstl/core cannot&;nbs
- java获取当前时间
- java注解实例-反射生成sql
- java8新特性学习
- microsoft
- uva 10036 Problem C: Divisibility
- Altium Designer 等长线&;&;蛇形线
- 解决:安装SQl 2008为SQL Server代理服务提供的凭据无效
- HDU_1174——爆头,空间直线方程,直线到点的距离