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