前端每周学习分享--第8期

r囧r小猫 2023-08-17 17:15 60阅读 0赞

## 1.canvas ##

用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

我读的教程是[MDN的Canvas教程][MDN_Canvas]，有细节有示例，非常棒了，推荐大家阅读。

这篇[学习 HTML5 Canvas 这一篇文章就够了][HTML5 Canvas]也很推荐。

这篇[canvas参考手册][canvas]提供了getContext("2d") 对象的属性和方法

我参照教程，也撸了几个canvas的代码放在codepen上。

[波点圆代码][Link 1]

![1619141-20190819194103895-460707608.png][]

[轨迹弹球代码][Link 2]

![1619141-20190819194132057-1204114388.gif][]

[加强轨迹粒子代码][Link 3]

![1619141-20190819194158012-1684005851.gif][]

## 2.H5游戏 ##

#### three.js ####

[three.js][]是一个javascript的3d库，我们可以用它来做各种3D效果和3D游戏，相当受欢迎。默认Ammo.js为默认物理引擎，基于JavaScript语言的3D库，耗性能，加载慢，效果一般。

[Three.js官网][three.js]上有超多示例网站、游戏，大多相当酷炫，看看就很心动了，自行去官网上感受一下?

#### Createjs ####

免费开源的H5游戏、动画和交互应用框架，比较轻量级，不适合大型游戏，不支持3D渲染。

#### Cocos2d-js ####

老牌2D 优秀开发引擎，支持接入微信小游戏，需要使用工具开发，不方便接入其他业务系统。

#### Egret ####

大型游戏制作能手，能够使用图形化工具制作游戏，性能优越。支持接入微信小游戏，支持2D、3D，使用 typescript 开发业务逻辑，代码规范。

## 3.webpack配置本地代理服务以实现跨域 ##

这个第5周的分享里配置vue.config.js里也讲过了，不过这周是实打实的用过了，才真正体会到它的好处。

![1619141-20190819194237030-1287930586.png][]

'/article/api': {
            target: 'http://xxx.yyy.com',
            changeOrigin: true,
            pathRewrite: function (path, req) { return path.replace('/article/api', '') }
          },

转载于:https://www.cnblogs.com/mthz/p/week8.html

[MDN_Canvas]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
[HTML5 Canvas]: https://www.runoob.com/w3cnote/html5-canvas-intro.html
[canvas]: https://www.runoob.com/tags/ref-canvas.html
[Link 1]: https://codepen.io/bluehat999/pen/NZgQyy
[1619141-20190819194103895-460707608.png]: /images/20230808/43822b6417bb46948252306987ab25eb.png
[Link 2]: https://codepen.io/bluehat999/pen/pXrqxZ
[1619141-20190819194132057-1204114388.gif]: /images/20230808/ab590c84d34d4c68afeae06cad5aeafd.png
[Link 3]: https://codepen.io/bluehat999/pen/ydPLRa
[1619141-20190819194158012-1684005851.gif]: /images/20230808/b3e7e0c4e8c64a8ca7c3989499217b98.png
[three.js]: https://threejs.org/
[1619141-20190819194237030-1287930586.png]: /images/20230808/4aaaaa0478ca4eb280663695faf290ab.png