HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>倒影</title>
<style>
body{background:#000;}
canvas{background: #fff; margin-left:500px;}
</style>
<script>
window.onload = function(){
var cvs = document.getElementById('canvas1');
var cxt = cvs.getContext('2d');
var oImg = new Image();
oImg.src = '1.jpg';
oImg.onload = function(){
cxt.drawImage(this,0,0);
var imgData = cxt.getImageData(0,0,oImg.width,oImg.height);
var newImgData = cxt.createImageData(oImg.width,oImg.height);//新建ImgData对象
for(var j=0;j<oImg.height;j++){
for(var i=0;i<oImg.width;i++){
var res = getXY(imgData,i,j);//获取j行上某点的色彩
setXY(newImgData,i,oImg.height-j,res);//将该色彩设置给其倒影
}
}
cxt.putImageData(newImgData,0,oImg.height+50);
}
}
//获取(x,y)点的色彩信息
function getXY(imgData,x,y){
var result = [];
result.push(imgData.data[(imgData.width*y+x)*4]);
result.push(imgData.data[(imgData.width*y+x)*4+1]);
result.push(imgData.data[(imgData.width*y+x)*4+2]);
result.push(imgData.data[(imgData.width*y+x)*4+3]);
return result;
}
//设置(x,y)点的色彩信息
function setXY(imgData,x,y,colors){
imgData.data[(imgData.width*y+x)*4] = colors[0];
imgData.data[(imgData.width*y+x)*4+1] = colors[1];
imgData.data[(imgData.width*y+x)*4+2] = colors[2];
imgData.data[(imgData.width*y+x)*4+3] = colors[3];
}
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
</html>
HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影的更多相关文章
- HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
随机推荐
- C#部署安装,将用户安装路径记录下写入注册表，并启动
安装部署程序,将安装目录写入注册表 (1)在“安装部署项目”上点击“注册表编辑器” (2)在HKey_LOCAL_MACHINE_SoftWare 下新建键 Manufacturer 代表软件的制造商 ...
- C#日志写入
/// <summary> /// 写日志,指定日志文件 /// </summary> /// <param name="File"></ ...
- mysql查询中通配符的使用
mysql查询中通配符的使用 在mysql查询中经常会使用通配符,并且mysql的通配符和pgsql的存在区别(稍候再讨论),而且mysql中还可以使用正则表达式. SQL模式匹配: “_” ...
- [CF355C]Vasya and Robot（思维，贪心）
题目链接:http://codeforces.com/contest/355/problem/C 题意:1~n n个物品各重wi,现在有一个人可以从左边拿和从右边拿, 左边拿一个物品的花费是l*wi, ...
- 第一次写python爬虫
花了4天终于把写完了把国内的几个漏洞平台爬完了,第一次写py,之前一直都在说学习,然后这周任务是把国内的漏洞信息爬取一下.花了1天学PY,剩下的1天一个.期间学习到了很多.总结如下: ======== ...
- 05_IOC容器装配Bean(注解方式)
IOC容器装配Bean(注解方式) 1.使用注解方式进行Bean注册 xml 方式: <bean id="" class=""> spring2.5 ...
- Timeout expired超时时间已到. 达到了最大池大小 错误及Max Pool Size设置
此文章非原创,仅为分享.学习!!! 参考数据库链接串: <add key="data" value="server=192.168.1.123; port=3306 ...
- [SAP ABAP开发技术总结]权限对象检查
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- HDU 1728 逃离迷宫
[题目描述 - Problem Description] 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,glo ...
- c++ string的实现。
第三次做了.只是做个复习.偶然发现之前的版本有内存泄露.基本功还是不过关.这次应该没有内存泄漏了.虽然是个简单版本. 1)了解堆,栈,值copy. 2)几个常用的c的字符函数和c中的char 如何表示 ...