最新 | 最热门 | 最高评价

+0  How Rendering Work (in WebKit and Blink)

Tag: Browser | Graphics | WebKit | Blink | Canvas | Rendering | webgl
Roger 发于 2014年04月16日 19:08 | 点击: 20751 | 展开摘要
How Rendering Work (in WebKit and Blink)

自从开始从事浏览器内核开发工作以来,已经写过不少跟渲染相关的文章。但是一直想写一篇像 How Browsers Work 类似,能够系统,完整地阐述浏览器的渲染引擎是如何工作的,它是如何对网页渲染性能进行优化的文章,却一直因为畏惧所需要花费的时间和精力,迟迟无法动笔。不管如何,现在终于鼓起勇气来写了,希望自己能够完成吧…

文章包括的主要内容如下 —

渲染基础 - DOM & R

查看全文: http://www.udpwork.com/item/12133.html

+0  High Performance Canvas Game for Android

Tag: Android | Browser | Graphics | JavaScript | Canvas | Chrome | uc
Roger 发于 2013年09月02日 09:37 | 点击: 1909 | 展开摘要
UC在今年5月份发布了支持硬件加速的实验室版,开始实验性地支持对2D Canvas进行硬件加速。在9月份发布的9.3版本中开始分开两个版本 – 普通版和加速版,针对中高端手机的加速版开始正式支持硬件加速2D Canvas渲染。并且在未来将要发布的9.4加速版还会带来全新的Canvas渲染架构,进一步提升性能和减少对系统资源的占用。

这篇文章的主要目的是为移动Canvas游戏的开发者如何针对Android UC浏览器9.4加速版进行渲染性能优化提供指导,不过文中的

查看全文: http://www.udpwork.com/item/11620.html

+0  GUIMark3 – 针对移动设备的HTML5 Canvas性能测试套件介绍

Tag: Graphics | 2D Graphics | Canvas
Roger 发于 2013年02月21日 15:35 | 点击: 1572 | 展开摘要
GUIMark3是针对移动设备的HTML5 Canvas性能测试套件,它设计了几种不同的场景,针对不同方面进行测试。所有的Demo都同样由一个60帧/秒的Timer来驱动绘制,所以理论上的最大帧率是60(实际上在不同的浏览器实现上可能会略有不同,在60上下浮动1~2帧),一般来说,超过50帧以上,考虑到误差的原因,个位数的参考意义已经不是很大,达到30帧以上的流畅度对于使用者来说已经基本可以接受了。测试里面Canvas都是固定大小的,在不同的设备上会根据屏幕的大小进行拉伸,但

查看全文: http://www.udpwork.com/item/11628.html

+0  用JavaScript截图

Tag: JavaScript | Canvas | Canvas2Image | html2canvas | 截图
四火 发于 2013年01月08日 23:11 | 点击: 2722 | 展开摘要
文章系本人原创,转载请保持完整性并注明出自《四火的唠叨》

使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像;但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象。两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷。

Canvas2Image

它的原理是利用了H

查看全文: http://www.udpwork.com/item/9043.html

+0  Flot介绍

Tag: JavaScript | Canvas | Flot | JQuery
四火 发于 2012年12月22日 18:51 | 点击: 1593 | 展开摘要
文章系本人原创,转载请保持完整性并注明出自《四火的唠叨》

最近在项目里面要用到JavaScript来绘制图表,JQuery的插件Flot是一个不错的选择。和我之前介绍过的D3不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。

Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3是采用SVG来绘制图形的,从我自己的体

查看全文: http://www.udpwork.com/item/8901.html

+0  Canvas中createRadialGradient的各种取值研究

Tag: JS | Web那些事 | 快乐的码农 | canvas | 放射渐变
iAzrael 发于 2012年11月25日 22:39 | 点击: 1611 | 展开摘要
话说上次melody同学分享了canvas绘图的相关内容,大家都对createRadialGradient的输入参数和结果蛮感兴趣的。因此我也把它的各种取值都试了一遍,发现了一些有趣的东西,共享之。

首先说下createRadialGradient,createRadialGradient是canvas创建发射渐变的一个方法,它的形参是这样子的:

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, r

查看全文: http://www.udpwork.com/item/9598.html

+0  Javascript代码体积优化的变态技巧

Tag: HTML5 | javascript | 程序 | canvas | 技术文章 | js1k
Huan Du 发于 2012年02月26日 18:54 | 点击: 2495 | 展开摘要
最近看到了js1k网站上的比赛,突然很有兴趣参加一把,于是写了一个自己的作品Save Messed Up Love放了上去。

所有提交的作品必须用小于1024B的javascript实现,我花了一些精力用一些变态技巧优化用工具精简过的代码体积,成功将代码从原来的1271B减到988B,空出的代码让我有空间增加一些额外的功能。在这里给大家分享一下这些变态技巧,注意,千万不要在实际项目中使用。

首先介绍一些不变态的技巧,算是入门级的内容,其要点是时间换空间,这是与jslint

查看全文: http://www.udpwork.com/item/6903.html

+0  以圆桌骑士为例浅尝HTML5游戏开发

Tag: 编程技术 | canvas | html5 | IE9 | 圆桌骑士 | 游戏开发
editor 发于 2011年06月23日 18:25 | 点击: 2820 | 展开摘要
随着XHTML的逐渐式微,Chrome,Safari,FireFox,Opera等现代浏览器正在积极完善HTML5实现,IE9也加入到标准的行列并将在今年上半年发布正式版,HTML5时代来临了。

在各种HTML5特性中,最吸引人的莫过于canvas标签,其提供的绘图API将颠覆以往web表现力匮乏的形象。随着浏览器对canvas的普遍支持,利用canvas实现的web应用会出现爆发性的增长。

本人尝试了使用canvas开发2d卷轴游戏,与大家分享。

本文将不介绍canv

查看全文: http://www.udpwork.com/item/5339.html

+0  开源轻量级HTML5游戏引擎gin简介

Tag: 游戏 | HTML5 | 浏览器 | javascript | 互联网 | 程序 | gin | 框架 | canvas | 技术文章 | 工作
Huan Du 发于 2011年02月09日 00:31 | 点击: 3561 | 展开摘要
HTML5 canvas让程序员自由的绘制想要的图形和动画,使得纯粹基于HTML/Javascript/CSS的游戏铺平了道路。只不过canvas最初并非为游戏而设计,而且除了绘图以外,做游戏还有不少其他事情要考虑,例如鼠标键盘事件、图层、动画等。为了方便程序员开发游戏,游戏框架/引擎陆续被开发出来,gin就是其中之一。

Project home: https://github.com/huandu/gin

Author: Huan Du (blog, twitter)

查看全文: http://www.udpwork.com/item/4234.html

+0  iPhone Web App 动态 icon

Tag: Web开发 | canvas | iPhone
loaoao@gmail.com (aoao) 发于 2011年01月01日 23:11 | 点击: 2944 | 展开摘要
不记得什么时候发现 iPhone 收藏到桌面的网页,在每次打开后会更新apple-touch-icon 的图片,也正是因为这个特性,我们可以用来动态更新icon

看下这个例子 http://aoao.ws/app/testicon/ 这个真的是iPhone Web App哦。不是iOS的,不信用iPad试下。。XD

测试时,发现启动图也可以变更。但是,切记 iPhone 的启动图大小只能是320*460 。为什么不是320*480呢,这是为了让web app启动时,如果是

查看全文: http://www.udpwork.com/item/3960.html
|<<<1>>>| 一共1页, 10条记录