前端小白提问关于 HTML5 canvas 的问题 - V2EX

Home Sign Up Sign In

Dive into HTML5

› http://diveintohtml5.org/

This topic created in 3791 days ago, the information mentioned may be changed or developed.

http://sale.jd.com/act/FNzfvb6rM3.html?cpdad=1DLSUE
如上， JD 活动页面的大 banner ，里面看似简单的烟花效果，自己扒了一下
发现整个 banner 是使用 CreateJS 给做出来的，精简到最后也有接近 200k 的大小
然后在网上找了一个类似的效果（ http://sc.chinaz.com/jiaoben/140319429250.htm ）
不依赖任何库，只有不到 10k 的大小
（以上容量均为 OS X 里面显示的大小）

无奈自己水平有限，于是请教一下：
像 JD 这种简单的闪烁烟花效果，不依赖 cjs 的话是不是也可以实现呢？
大 V 们能否给个思路，不胜感激！

12 replies • 2016-01-21 17:58:41 +08:00

1

luoway

Jan 21, 2016

才发现汉字真的可以当方法名！
这样就不用纠结怎么取变量名、方法名了。

2

Aidea

OP

Jan 21, 2016

@luoway 我也第一次见到，不知道有没有兼容性问题~

3

luoway

Jan 21, 2016

@Aidea http://tu.dog/
ie11 单纯测试汉字兼容性没问题

4

MiGong

Jan 21, 2016

使用 Canvas 可以实现，在 http://codepen.io/ 搜索 fireworks

5

chemzqm

Jan 21, 2016

jd 这破玩意做的，半天都刷不出来，简直坑爹

6

Biwood

Jan 21, 2016

jd 那个比 10K 那个简单多了，你看看源码，其实原理很简单，就是以 60 帧每秒的速度刷新 canvas ，不断的清空画布并重新画图，由于 canvas 启用了 GPU 加速，所以这个过程是很迅速的，只是计算运动轨迹和速度微调等需要花费一些时间

7

FrankFang128

Jan 21, 2016

JS 的字符编码比 Python 2 好多啦

8

Aidea

OP

Jan 21, 2016

@luoway 看到这个站，想起来那个怎么做爱的项目了。。。

9

Aidea

OP

Jan 21, 2016

@MiGong
@Biwood 因为之前没做过 canvas 相关的东西，所以还是感觉有点棘手啊

10

Aidea

OP

Jan 21, 2016

@MiGong 原来 fireworks 是烟花的意思!!!这个站点不错，就是都太花哨了~

11

MiGong

Jan 21, 2016

1

@Aidea 如果要学 Canvas 看看这个能不能帮到你 http://canvas.migong.org

12

Aidea

OP

Jan 21, 2016

@MiGong 先 Mark 了，这不是一朝一夕的事啊，谢谢了~

About · Help · Advertise · Blog · API · FAQ · Solana · 3762 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 37ms · UTC 10:26 · PVG 18:26 · LAX 03:26 · JFK 06:26
♥ Do have faith in what you're doing.