从google 电吉他 看html5
 |
panpan_xin
2011-06-09
今天打开google，看到了他的logo，做的很不错，听了吉他声，呵呵，再看看他的js，只能说乱
还用到了html5标签canvas ， 大家也可以看到火狐和ie看到的效果是不太一样的，在他的js里面判段了一下浏览器是否支持html5， 而ie8不支持，采用的是创建多个div（不过怎么弄也不太好，没出不来那个绚丽效果，例如变颜色） 支持html5的就不同了 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 执行一下html就可以看到html5的方便之处了 <html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
支持html5 的是两个矩形，不是的就会报脚本错误 |
|
BoneWG
2011-06-09
引用 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 应该是HTML5 可以使用 JavaScript 在网页 canvas 元素上绘制图像。 |
|
fivestarwy
2011-06-10
额，我还以为有电吉他的源代码呢
|
 |
rainsilence
2011-06-11
没设么难得
原理可以参照 http://www.iteye.com/topic/1081323 |
 |
lf662000
2011-06-11
rainsilence 写道 没设么难得
觉得电吉他没什么难的做个出来看看，别光说不练。 |
 |
witcheryne
2011-06-11
rainsilence 写道 没设么难得
说起来是不难``` 做这个只要要懂些乐理知识 |
 |
xuehanxin
2011-06-11
被装了，有本事你做个
|
|
rainsilence
2011-06-12
xuehanxin 写道 被装了，有本事你做个
哈？？ 原理很简单：声音用html5是做不出来的。因为各个浏览器都有差异，并且触发时间上有延迟，效果不好。google利用js调用swf。完成声音的触发。接下来，炫有两种做法，一种是用图片。一种是用直接画的。canvas api中有两次曲线的函数，设置定时器，直接调用就行了。至于如何触发直线到曲线的动画。那又是简单的不得了，判断一个点在直线上你不会吗？根据点到终点的距离设置弦振动的幅度。至于用图片的方法，先把频度设置为5-7个等级设置好(全灰色图片)。然后定义数据结构，第一帧到第七帧。用定时器循环。至于颜色的变化，由于canvas中支持rgba的方式，改颜色只需要改变4维数组中相应的点就行。说道这里还有难度吗？ |
|
rainsilence
2011-06-12
这次的电吉他，上次的舞者动画，再上次的画廊。其实原理都是很简单的。
舞者动画就不说了吧，就是css sprite，一张图上把所有的帧都画好，再切换 画廊的原理也就一句话：overflow:hidden的反向思维。 国人总喜欢把别人做的技术归结到别人很牛，总想着别人是怎么做出来的。其实人家真正牛的地方在于创意，而不是技术！！！！你不懂怎么实现，只能说明你文档看的不透彻，对api理解的不够深而已。 |
 |
can4you
2011-06-12
rainsilence 写道 这次的电吉他，上次的舞者动画，再上次的画廊。其实原理都是很简单的。
舞者动画就不说了吧，就是css sprite，一张图上把所有的帧都画好，再切换 画廊的原理也就一句话：overflow:hidden的反向思维。 国人总喜欢把别人做的技术归结到别人很牛，总想着别人是怎么做出来的。其实人家真正牛的地方在于创意，而不是技术！！！！你不懂怎么实现，只能说明你文档看的不透彻，对api理解的不够深而已。 |
