资讯频道 → Web前端
阅读更多

4顶
2踩

Web前端

原创新闻 使用HTML5+Canvas，实现 流光溢彩的TV 效果

2010-03-16 15:33 by 副主编 just_cool 评论(8) 有8395人浏览
HTML5

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Sergey Chikuyonok 使用HTML5+Canvas，创建出了一个流光溢彩的 TV 效果。

 

重要实现代码如下：

 

function getMidColors(side) {
        var w = buffer.width,
                h = buffer.height,
                lamps = getOption('lamps'),
                block_width = getOption('block_size'),
                block_height = Math.ceil(h / lamps),
                pxl = block_width * block_height * 4,
                result = [],
 
                img_data = buffer_ctx.getImageData(side == 'right' ? w - block_width : 0, 0, block_width, h),
                total_pixels = img_data.data.length;
 
 
        for (var i = 0; i <lamps; i++) {
                var from = i * w * block_width;
                result.push( calcMidColor(img_data.data, i * pxl, Math.min((i + 1) * pxl, total_pixels - 1)) );
        }
 
        return result;
}
 点击查看：http://chikuyonok.ru/ambilight/
来自: ajaxian
4
顶
2
踩
评论 共 8 条 请登录后发表评论
8 楼 babashengri 2011-08-10 16:38
你这台高端了。 表示压力黑大。
7 楼 java032 2010-04-08 15:00
Firefox 可以
遨游 360  IE 都不行
6 楼 liweixw 2010-03-17 22:13
内存一直到300MB
5 楼 hepeng19861212 2010-03-17 12:40
浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.8) Gecko/20100202 Firefox/3.5.8
CPU:AMD Athlon 64 processor 3000+
内存:1G

cpu 100%，播放好卡~~~~
4 楼 nail2008 2010-03-17 09:59
IE9才开始支持HTML5
3 楼 wkkyo 2010-03-17 09:09
IE看不了
2 楼 wiwiluo 2010-03-17 08:37
CherryRemind 写道
Chrome可以看， IE7貌似不支持~~~

IE还不支持HTML5
1 楼 yuriyan 2010-03-16 20:03
前几天就有的新闻了。。。
0 楼 CherryRemind 2010-03-16 17:27
Chrome可以看， IE7貌似不支持~~~

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • html5+exif.js+canvas

    实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, '...

  • 微软官员回眸开发Windows 2000的艰辛历程

    微软官员回眸开发Windows 2000的艰辛历程　　微软公司近日宣布，已将 Windows 2000 Professional、Windows 2000 Server和Windows 2000Advanced Server等软件投入生产。随着Windows 2000工作组结束这项微软历史上最艰巨的开发任务，公司Windows业务部高级副总裁Brian Valentine 和项目经理 Iain

  • Windows 2000开发过程中一些有趣的数据 (转)

    Windows 2000开发过程中一些有趣的数据 (转)[@more@]windows 2000开发过程中一些有趣的数据 　　Windows 2000在硬件支持方面所取得的进步：支持的OEM系统的数量：580支持的打印机的数...

  • HTML5+Canvas实现的超炫粒子效果文字动画特效源码

    这是一款基于HTML5 Canvas实现的文字特效源码，在页面下方的输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，动画效果炫酷十足，是值得收藏的html5经典特效。

  • html5 js+canvas 频谱动画代码 音频条效果

    js+canvas的audio频谱效果 想要获取音频条播放数据的 可以看我发的上个资源

  • html5+Canvas+游戏开发实战

    本人从华章图书网站下的资源 为了与大家分享 遂上传 有兴趣游戏开发的朋友可看看

  • HTML5+jQuery+Canvas调用手机拍照功能上传图片

    HTML5+Canvas+jQuery调用手机拍照功能，本地压缩上传图片。以上都是测试通过了的。

  • canvas+js实现动态饼图效果

    canvas+js实现动态饼图效果 参考了一些网上的例子，利用canvas+js实现动态饼图效果demo，包括鼠标移入图块颜色变化以及带有tooltip提示。实现逻辑可分为三个步骤： 1、首先利用canvas画布原理画饼图。 2、添加鼠标移...

  • 如何使用H5+canvas实现简单的音频频谱图

    导语：近期工作上遇到了一个利用H5实现一个音频播放器，同时要具有音频可视化的实现，刚听说这个需求的时候还是很懵逼的，也去做了调研，没找到开源的可使用的组件，于是乎自己边查资料边摸索边实践，还真的瞎猫碰到...

  • 刮一刮抽奖 html,javascript+canvas实现刮刮卡抽奖效果

    *{ margin:0; padding:0;}.cjbox{ margin:100px; height:80px; width:200px; background:#FFF;...}#canvas{position:absolute; left:0px; top:0px;z-index:99;}.sjmes{ position:absolute; left:0px...

  • 2023双旦 跨年烟花 html+canvas实现（附源码）

    双旦即将到来，之前在短视频平台看到3d烟花的效果，遂在网上找了一套烟花的源码，下面跟大家分享...HTML5+Canvas漂亮的3D烟花2024跨年特效可以获取代码直接运行！下面有几点需要注意修改的地方，不然可能运行不太流畅。

  • VUE+Canvas实现简单的五子棋游戏

    《VUE+Canvas实现上吊火柴人猜单词游戏》 《VUE+Canvas 实现桌面弹球消砖块小游戏》 《VUE+Canvas实现雷霆战机打字类小游戏》 《VUE+Canvas实现财神爷接元宝小游戏》 在布局上，五子棋相比那些目标是随机运动的...

  • HTML5+canvas一箭穿心

    表白神器 HTML5的canvas画一箭穿心 HTML5的canvas画一箭穿心 作为一个专业得程序员，咱们的表白怎能一个送花，几句情话了得，当然是要上代码啦！！！ Draw Heart Your browser does not ...

  • vue 基于MediaRecorder+canvas实现视频录屏

    &lt;template&gt; &lt;div class="RightContent"&gt; &lt;canvas id="canvas" width="640" height="360"&gt;&lt;/canvas&gt; &lt;video id="video" au

  • 360度全景图-HTML5 Canvas实现

    360度全景图，打开fullview.html即可运行 支持chrome/FF/IE9+

  • HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果

    Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。

  • jquery扩展html5+canvas实现多张图片 预览 压缩 上传

    action="'+form_action+'"&gt;&lt;/form&gt;').append('&lt;canvas id="canvas"&gt;&lt;/canvas&gt;'); } function test(value) { var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g'); return ...

  • 小技巧H5使用Html2Canvas实现自动截屏（下）

    上文写到使用html2Canvas实现截屏。上次留了一个问题，如果当前dom元素对象比较大，比如包含一个比较大的图片等，在将dom序列化成字符串时，极易导致字符串超长。对于超长的内容，后台程序将获取不到参数，那么怎么...

  • HTML5+Canvas漂亮的3D烟花动画生日特效，节日特效，烟花

    fireworks HTML5+Canvas漂亮的3D烟花动画生日特效，节日特效，烟花 https://github.com/louislivi/fireworks https://github.com/louislivi/fireworks

  • html5+canvas实现图片的压缩上传

    在任何项目中，图片的上传都是很常用的功能，在html5未普及之前，人们用插件来实现这个功能，比如jquery.fileupload.js，这些插件虽然功能强大，但是总觉得挺麻烦。如果你的功能的浏览器要求是在IE10以上，那么不妨...

Global site tag (gtag.js) - Google Analytics