学习前端第一步——canvas动画渐变效果
本文最后更新于 477 天前,其中的信息可能已经有所发展或是发生改变。

最近有一个小页面想写一写,看见别人的头像就想起来这个能不能用代码写出来

这是那位同学的原来的头像:

原来的头像
原来的头像

感觉总不是那么好看

我这里最早看到的是静态的,上传之后才发现是动态的···第一次听说jpg还有动态的,原谅我孤陋寡闻,不过原来那个和我这个风格不一样,大家可以参考参考

于是我花了几天的课余时间给写了个新的,个人觉得还是逼格比较高的,除了有些小问题至今无法解决之外(最奇葩的就是那个onmouseout的问题),还是挺好看的(吧)·······

大家有兴趣可以去看看,记得回来评论点赞哦~~~

下面言归正传,关于这里面用到的canvas绘图以及canvas动画的效果:
canvas:一种html5技术提供的非常方便的javascript API(它只是一个标记,给js一个接口承载图形)

什么东西我们都说他方便,可是总不是那么方便!
小编在那个页面中有这样一个图形:

嘴部开始的canvas
嘴部开始的canvas


这个的绘制使用了canvas.代码如下:

line = document.getElementById("moline");    //拿到canvas的标记承载用(画布)
    moline = line.getContext("2d");    //这是必须的,而且不要想入非非,现在canvas只有2d绘图
    moline.beginPath();    //开始路径
    moline.lineWidth = 5;    //设置线条粗细
    moline.lineCap = "round";    //设置线段两端样式,有
    moline.moveTo(270, 120);    //设置起点
    moline.lineTo(50, 40);    //设置终点
    moline.stroke();    //绘制图形
    moline.moveTo(50, 120);
    moline.lineTo(270, 40);
    moline.stroke();

这样就画出来两条静止的相交直线了,可是怎么让他动起来呢?
好办!思路如下:

  • 首先,清除原来指定区域的所有图像
  • 然后.我们让他不断地绘制新图像(使用setInterval || setTimeout || loop)来给改变方向加减变化量,包括循环第一步!!千万不能忘!!
  • 其次,当到我们想要的效果时注销Interval或者停止循环
  • 通过调节setTimeout || setInterval的时间和每次变化量调节速度(所以尽量别用循环,不好调速度)

有了思路就好办多了!
下面贴代码:

if (typeof(i) == 'undefined') {
        i = 0;
        moline.clearRect(0, 0, 320, 125)
    }
    moline.clearRect(0, 0, 320, 125);
    moline.beginPath();
    moline.lineWidth = 5;
    moline.lineCap = "round";
    moline.moveTo(270 + i, 120 - i);
    moline.lineTo(50 - i, 40 + i);
    moline.stroke();
    moline.moveTo(50 - i, 120 - i);
    moline.lineTo(270 + i, 40 + i);
    moline.stroke();
    i = i + 0.3;
    if (i < 40) {
        setTimeout('docmoline()', 10)
    } else if (i >= 40) {
        i = undefined;
        $('#moline').fadeOut(800);
        setTimeout('circle()', 1200);
    }

我这里采用的setTimeout的方式循环调用,然后加上判断就可以实现了,可惜实现出来的不是两侧的圆弧轨迹,不过也差不多了,凑活下吧!
同样圆形也可以实现:

if (typeof(first) == 'undefined') {
        first = 10
    }
    moline.clearRect(0, 0, 320, 125);
    moline.beginPath();
    moline.lineWidth = 5;
    moline.lineCap = "round";
    moline.arc(150, 125 - first, first, 0.2 * Math.PI, 0.8 * Math.PI);
    moline.stroke();
    first = first + 1;
    if (first < 140) {
        setTimeout('smileline()', 10)
    }

大家会注意到,我在这上面使用了两个变量(i&first)来判断是不是第一次开始绘图,这充分的暴露了我新手的本质·······
没关系啦,跑出来好看就好!!记得回来评论!!
我把这东西录制之后转成gif,颜色好恶心!!

gif头像
gif头像


还是原来的好看!

新的头像
新的头像
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇