关于HTML5组件Canvas实现图像灰度化教程
新建一个html页面,在body tag之间加入
Gray Filter
添加一段最简单的JavaScript 脚本
ad = function() {
var canvas = lementById("myCanvas");
// TODO: do something here
}
从Canvas对象获取绘制对象上下文Context的代码如下:
var context = ontext("2d");
在html页面中加入一幅图像的`html代码如下
完全源代码如下:
ad = function() {
var canvas = lementById("myCanvas");
var image = lementById("imageSource");
// re-size the canvas deminsion
h = h;
ht = ht;
// get 2D render object
var context = ontext("2d");
Image(image, 0, 0);
var canvasData = mageData(0, 0, h, ht);
alert(ring());
alert(ring());
// gray filter
for ( var x = 0; x < h; x++) {
for ( var y = 0; y < ht; y++) {
// Index of the pixel in the array
var idx = (x + y * h) * 4;
var r = [idx + 0];
var g = [idx + 1];
var b = [idx + 2];
// calculate gray scale value
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
[idx + 0] = gray; // Red channel
[idx + 1] = gray; // Green channel
[idx + 2] = gray; // Blue channel
[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (h - 8) || y > (ht - 8))
{
[idx + 0] = 0;
[idx + 1] = 0;
[idx + 2] = 0;
}
}
}
mageData(canvasData, 0, 0); // at coords 0,0
}
Gray Filter
代码中的文件可以替换任意你想要看到的图片文件
HTML5, 原来如此神奇。程序在google浏览器中测试通过,
最后的忠告,千万不要在本地尝试运行上面的代码,google浏览器的安全检查会自动阻止从浏览器中读写非domain的文件
最好在tomcat或者任意个web container的server上发布以后从google浏览器查看效果即可。
-
JavaScript基本语法分析
一、JavaScript基本语法。(一)数据类型与变量类型。整数,小数,布局,字符串,日期时间,数组强制转换:parseInt()parseFloat()isNaN()(二)数组var数组名=newArray([长度]);//“假冒”数组th-长度a[下标]=值。a[下标](三)函数复制代码代码如下:function函数名(形参){}function...
-
javascript中setInterval的用法总结
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。setInterval的表达式格式主要有:setInterval(fnname,time,par1,par2,);setInterval(obj,fnname,time,par1,par2,);第一种是最常见的表达...
-
asp下去除超链接函数
复制代码代码如下:<%FunctionReplaceUrl2(HTMLstr)Dimn,str1,str2,str3,str4HTMLstr=Lcase(HTMLstr)Forn=1toUbound(Split(HTMLstr,"(.+?)"RegRemoveHref=ace(HTMLstr,"$1")ENDFunction...
-
css经典教程
css经典教程1有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写“最近”的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。我们在中向大家介绍过很多CSS经验与技巧,这些东西都发布在/css/...
相关文章
- HTML5中Canvas的事件处理介绍
- Lantern Festival,The 15th day of the 1st lunar month英语作
- 英语阅读:African Union Leaders Talk Mali, Chinese Investmen
- java使用ConcurrentHashMap和计数器实现锁的方法
- HTML5教程:画布Canvas基础知识讲解
- Javascript实例教程如何使用HoTMetal
- HTML5 Canvas基本绘制线条教程
- HTML5中canvas标签实现刮刮卡效果
- 关于JAVA实现httpClient的实例
- 基于html5 canvas实现漫天飞雪效果的方法