HTML5中的Canvas（径向渐变）
说明完了线性渐变，我们再来看看径向渐变，其实我觉得两者是一回事儿……只不过径向渐变的浏览器兼容性更糟糕一些（现在已经好多了），为了不出洋相，我们还是要多知道一些。 什么是径向渐变 又要解释一下什么叫径向渐变，其实就是环形的渐变了，由圆心（或者是较小的同心圆）开始向外扩散渐变的效果，听着有些抽象，往下看图一下子就明白了。线性渐变指定了起点和终点，径向渐变则指定了开始的结束园的圆心和半径。这里使用cr… Read More »
Tag Archives: Canvas
HTML5中的Canvas（线性渐变）
这一章讲解Canvas绘图中的线性渐变，不过呢，渐变的处理在各种浏览器中还略有不同，我们也会就这方面做一些说明。 什么是线性渐变 所谓线性渐变，是指从开始地点到结束地点，颜色呈直线的徐徐变化的效果。为了实现这种效果，我们绘制时必须制定开始和结束的颜色。而在Canvas中，不仅可以只指定开始和结尾的两点，中途的位置也能任意指定，所以可以实现各种奇妙的效果。 为了绘制线性渐变，我们需要使用create… Read More »
HTML5中的Canvas（颜色）
这一次讲解Canvas中的颜色应用，同时Canvas中的颜色还能带透明，太酷了~~ 指定颜色 现在为止我们画的图形都是黑色的，这是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。 ctx.strokeStyle = color —— 指定绘制线的颜色 ctx.fillStyle = color —— 指定填充的颜色 来看看实际的例子： onload = function(… Read More »
21个酷毙了的HTML5演示
再介绍几个HTML5的实例，相信各位看了，一定会大叫，“WoW！”。我是用Chrome浏览器观看确认过了，其他的浏览器不知道能不能正常观看…… 1、8位图像循环 这个演示可以产生惊人的动画效果，潺潺流水声加256色画面，不过看样子每一帧都可以使用独立的调色板，所有实际的动画效果要比单独的GIF好的多。 2、粒子字符动画 可以根据输入实时的生产动画，也许不是那么酷，但是很有含量。
HTML5中的Canvas（绘制）
Canvas中不仅可以画线（路径），还能画很多其他的图像，这一章就介绍Canvas的其他两种绘图API。 矩形 我们在上一章只用线来画了一个矩形，其实可以一下子就画出来的，用下面函数： ctx.fillRect(x, y, width, height) 画一个填充的矩形，x, y是矩形左上坐标，剩余两个不是右下坐标而是宽度和高度。 ctx.strokeRect(x, y, width, heigh… Read More »
HTML5中的Canvas（使用）
这个部分讲述html5的使用前准备和简单的使用例子。 ExplorerCanvas的准备 尽管微软的最新浏览器IE9已经支持Canvas了（据说的……自己还尚未验证），但IE9不知道现在有几个人用上了，更不要说国内那些洪水猛兽般的IE6用户了，不管我们有多么的不情愿，一大票的IE就是不支持Canvas，而它又是使用率最高的浏览器，我们必须做一点什么。了解一下ExplorerCanvas，然后到这里… Read More »
HTML5中的Canvas（介绍）
这部分说明Canvas是什么，然后Canvas又能做哪些事情。 什么是Canvas Canvas是在浏览器上绘图的一种机制。 传统的网页，总是使用GIF或者JPEG来显示图像，这种图形是需要事先画好，“静态”的图像；随着各种要求的发展，使用Flash或Java的“动态”图像也出现了。 而Canvas，则是不使用Flash和Java，而是用Javascript的一种绘图手段。 我们实际的看一个例子，… Read More »
HTML5中的Canvas（目录）
世界正在向着美好方向发展着，不管2012、或者其它的毁灭型小行星、邪恶外星人、恐怖病毒等等最终是否会来到，我们在向着未来稳步前进。嗯……我想说什么？ 互联网的老先辈HTML4，与现在互联网上最耀眼的新星，HTML5相比，是那么的孱弱和不完美，却已经给我们带来了如此巨多的惊喜。这个世界没有了网络将是不可想象的，那么未来的网络会走向何方？HTML5会把我们带到怎样的高度？恐怕没有人知道答案~ 博客里应… Read More »