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 ...
随机推荐
- Shell脚本编程初体验
原文:http://linoxide.com/linux-shell-script/guide-start-learning-shell-scripting-scratch/ 作者: Petras L ...
- UVA 10564 十 Paths through the Hourglass
Paths through the Hourglass Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & % ...
- Vi编辑器下使用分屏显示【已自己验证所有】
:new 水平分割出一个新窗口 :vnew,:vne 垂直分割出一个新窗口 :new+文件路径/文件名; 在新的水平分屏中 载入/新建 文件.[文件存在则载入,不存在则在指定的路径新建,下同] :vn ...
- python中的类中属性元素加self.和不加self.的区别
在类中,self只能在函数中使用,表示的是实例属性,就是每个实例可以设置不值,而不相互影响.如果在类级别使用没有self的属性,是类属性,一般作为全局变量来用的.事实上:就是一个是类属性 一个是对象属 ...
- Linux基础01 学会使用命令帮助
Linux基础01 学会使用命令帮助 概述 在linux终端,面对命令不知道怎么用,或不记得命令的拼写及参数时,我们需要求助于系统的帮助文档:linux系统内置的帮助文档很详细,通常能解决我们的问题, ...
- [转]产品需求文档(PRD)的写作
产品需求对产品研发而言非常重要,写不好需求,后面的一切工作流程与活动都会受到影响.转载一篇文章,关于产品需求文档写作方面的,如下: 本文摘自(一个挺棒的医学方面专家):http://www.cnblo ...
- ASP.NET调用Office Com组件权限设置
ASP.NET在调用Office Com组件时,经常会出现权限限制的问题,而出现如下错误: 现通过以下几步设置,可解决上述问题:(1)64位系统中,请在IIS应用程序池集成模式中应启用调用32位应用程 ...
- Android 使用finalBitmap实现缓存读取
public class NewsApplication extends Application{ private FinalBitmap finalBitmap=null; public Final ...
- 缓存技术之——Yii2性能优化之：缓存依赖
Yii中的缓存依赖,简单来说就是将缓存和另外一个东西绑定在一起,如果另外一个东西发生变化,那么缓存也将发生变化.有点儿类似于JS中的触发事件(但是也不那么像),缓存的变动是依赖的东西所导致的. 依赖可 ...
- mysql批量替换数据库某字段部分内容
update 表名 set 字段名=replace(字段名,’要替换的内容’,’替换后的内容’) eg:修改scenario表中的picture字段中的ip地址. UPDATE scenario SE ...