标签归档:canvas

WebGL2画球

本文演示的代码均在这里,本文仅说明原理,不会细化到webgl基础。

最近学会了用WebGL2画球,其实学会也有两个多月了,但由于某些误解一直没法生成正确的贴图映射,导致贴图错乱,直到两周前才突然开窍发现了原因,又拖到今天才来发这么一篇文章。忙里偷闲做事就是效率低下,好在并没有什么迫切需求要做,慢慢学也无所谓。

要用WebGL画球主要就是要先建个球模,然后给它上色或者贴图。要贴图就要搞清楚每个顶点和贴图的坐标映射关系,不同的球模类型映射关系也不一样,我这画的是最容易理解的经纬球,即以地球仪那种经纬线为线框的球体。

接下来开始我们的正题。

先摆一个随便找的经纬球

现在假装看不见经线(竖线),只能看见纬线(横线),那么这个球外面每隔一定的角度就绕着一个正圆,我们生成模型也可以用这种逻辑,首先生成一个正圆,然后把它按角度调整好大小并放到正确的位置上。关于生成一个合适边数的圆的方法我在前一篇文章已经写过了,这里就不再赘述了。

继续阅读WebGL2画球

Web Audio Api获取音乐频率演示

使用的canvas库是我的COL,参考刘哇勇的部落格基于Web Audio API实现的音频可视化效果(被我翻译了一部分)完成。

食用方法:点选择文件放首歌进去,或者把歌拖到选择文件的框上面。

请确保你的浏览器最新!(经测试只有chrome和firefox支持良好)

经测试2,把<我的滑板鞋>放入其中观看效果更佳!

在新页面中打开旧版
在新页面中打开新版
精心特制的coding参赛作品
继续阅读Web Audio Api获取音乐频率演示

canvas图形库求修正鼠标部分

快要开学了,博主的作业还没做好,老师布置的电脑作品也还没做好,所以得先放下这个图形库了,希望有人来帮忙修正一下库里鼠标定位的部分,现在的情况是鼠标定位有偏差。具体如下:

在主对象里有一个mouseX和mouseY,他们存放了当前鼠标指针在画布上的位置。鼠标在画布上的位置主要用于判断鼠标事件。

和这有关的是以下几个部分
73行左右的C_GUI.setrelPosition,用于设置鼠标位置最终计算的偏移量。
861行左右的C_GUI.mousePosition,用于响应鼠标移动事件中最终计算鼠标位置。
其它就没有了,现在我个人认为造成偏差是我的计算没考虑margin和padding等造成的,希望有人来帮忙解决一下咯。
(从项目里fork一个分支出去,修改好了pull回来,并在这里留个言或者发个邮件给我)

提示:在控制台打开Debug(库对象.Debug.on())在画布底下可以看到鼠标信息(我刚加上去的)

GitHub地址:https://github.com/iTisso/CanvasObjLibrary/

canvas函数图

【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志:加上坐标轴的箭头,加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法:修改了清除画布的方法,极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能:差不多是坐标轴的单位线

昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码,然后又一时兴起想把它改好一点,于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳,其他浏览器可能会有卡顿现象】
现在已经做成了这个样子

源地址在这里佳佳实验室的地址在这里,代码在文章最下面,自带注释
继续阅读canvas函数图