升级到最新的node之后这俩模块是彻底没法共存了，之前还能通过降级其中一个模块来兼容一下，现在我怎么试都没法成功运行了，于是尝试找解决方案。
然后我发现这是由于两个模块使用的同名链接库不兼容导致的其中一个模块报错，似乎就是个无解的问题，偶然发现一个替代方案：https://github.com/Brooooooklyn/canvas
如果本来只使用了标准的绘制功能，那么可以连代码都不用改，直接替换掉依赖就可以解决问题，如果使用了非标准canvas方法，那么可能需要做一些小修改，比如将图片导出为png等格式时的额外参数之类的情况。
基本上要进行的操作就是删除`package.json`中的`canvas`依赖那行，然后直接执行`npm i @napi-rs/canvas`，npm就会自动删除`canvas`模块并安装`@napi-rs/canvas`，然后把代码中的`require(“canvas”)`换成`require(“@napi-rs/canvas”)`即可。
本文演示的代码均在这里，本文仅说明原理，不会细化到webgl基础。
最近学会了用WebGL2画球，其实学会也有两个多月了，但由于某些误解一直没法生成正确的贴图映射，导致贴图错乱，直到两周前才突然开窍发现了原因，又拖到今天才来发这么一篇文章。忙里偷闲做事就是效率低下，好在并没有什么迫切需求要做，慢慢学也无所谓。
要用WebGL画球主要就是要先建个球模，然后给它上色或者贴图。要贴图就要搞清楚每个顶点和贴图的坐标映射关系，不同的球模类型映射关系也不一样，我这画的是最容易理解的经纬球，即以地球仪那种经纬线为线框的球体。
接下来开始我们的正题。
先摆一个随便找的经纬球
现在假装看不见经线（竖线），只能看见纬线（横线），那么这个球外面每隔一定的角度就绕着一个正圆，我们生成模型也可以用这种逻辑，首先生成一个正圆，然后把它按角度调整好大小并放到正确的位置上。关于生成一个合适边数的圆的方法我在前一篇文章已经写过了，这里就不再赘述了。
使用的canvas库是我的COL，参考刘哇勇的部落格和基于Web Audio API实现的音频可视化效果(被我翻译了一部分)完成。
食用方法：点选择文件放首歌进去，或者把歌拖到选择文件的框上面。
请确保你的浏览器最新！(经测试只有chrome和firefox支持良好)
经测试2，把<我的滑板鞋>放入其中观看效果更佳！
在新页面中打开旧版
在新页面中打开新版
精心特制的coding参赛作品
继续阅读Web Audio Api获取音乐频率演示
做了个canvas文字测试，看看效果如何。
由于代码中包含了图片的base64码所以放在最后了，测试结果如下：
//代码内容：一张写了5个蓝色喵的图片和5个无任何样式的喵字各绘制十万次 123.8950000006298 //图片 153.4990000000107 //文字 91.63100000114355 //图片 150.8400000002439 //文字 88.55799999946612 //图片 150.93399999932444 //文字 88.62000000044645 //图片 150.16500000092492 //文字 87.77499999996508 //图片 149.93399999912072 //文字 87.90600000065751 //图片 149.8909999991156 //文字 87.98000000024331 //图片 65.1319999997213 //文字
为了尽量准确一点，避免浏览器热身等原因我把测试放在循环里进行多次测试。
可见文字渲染确实是效率比较低的，不过这里还不是太明显。
这里的文字渲染还是无任何样式的，平常应用的时候不可能就这么用没样式的字，所以我还要再来一个有样式文字渲染测试。
继续阅读Canvas文字绘制性能测试
网上的大多数文档里都没有说视频(video对象)可以绘制到canvas上面，提到canvas的drawImage方法的时候都只提到了把Image对象和canvas对象绘制到canvas上，于是我这个熊孩子就把video对象也拿来试了试，果然也是可以的。
打开一首歌然后用鼠标点一下这个鼓，接着就尽情的按zxcv吧！
快要开学了，博主的作业还没做好，老师布置的电脑作品也还没做好，所以得先放下这个图形库了，希望有人来帮忙修正一下库里鼠标定位的部分，现在的情况是鼠标定位有偏差。具体如下：
在主对象里有一个mouseX和mouseY，他们存放了当前鼠标指针在画布上的位置。鼠标在画布上的位置主要用于判断鼠标事件。
和这有关的是以下几个部分
73行左右的C_GUI.setrelPosition，用于设置鼠标位置最终计算的偏移量。
861行左右的C_GUI.mousePosition，用于响应鼠标移动事件中最终计算鼠标位置。
其它就没有了，现在我个人认为造成偏差是我的计算没考虑margin和padding等造成的，希望有人来帮忙解决一下咯。
(从项目里fork一个分支出去，修改好了pull回来，并在这里留个言或者发个邮件给我)
提示：在控制台打开Debug（库对象.Debug.on()）在画布底下可以看到鼠标信息(我刚加上去的)
我花了几天时间来写这个低效率绘图库(求优化)，现在已经提交到GitHub上了，目前在鼠标定位方面还稍微有点偏差，希望有空的码农稍微帮一下忙(发布前检查的时候还是好的呢இ௰இ,so sad)。
这是初代版，即可以用但是功能还不是很完善。
继续阅读CanvasObjLibrary-canvas基础绘图库
【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志：加上坐标轴的箭头，加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法：修改了清除画布的方法，极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能：差不多是坐标轴的单位线
昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码，然后又一时兴起想把它改好一点，于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳，其他浏览器可能会有卡顿现象】
现在已经做成了这个样子
源地址在这里，佳佳实验室的地址在这里，代码在文章最下面，自带注释
继续阅读canvas函数图