Canvas变形金刚

这里是html代码

<canvas width=500 height=500 id="cas"></canvas>

这里是css代码

*{
    margin: 0;
    padding: 0;
}
canvas{
    /*border: 1px solid;*/
    position: absolute;
    margin-left: 50%;
    left: -250px;
}

这里是js代码

onload = function () {
        var cas = document.querySelector("#cas");
        var ctx = cas.getContext("2d");
        //左上角的眼睛
        ctx.moveTo(12,55);
        ctx.lineTo(78,55);
        ctx.lineTo(96,107);
        ctx.lineTo(185,164);
        ctx.lineTo(205,259);
        ctx.lineTo(135,259);
        ctx.lineTo(34,194);
        ctx.closePath();//最后一次和第一次拼接

        //左上角的眼睛里面的空白
        ctx.moveTo(57,102);
        ctx.lineTo(60,125);
        ctx.lineTo(171,196);
        ctx.lineTo(171,176);
        ctx.closePath();

        //左上角的眼睛里面的空白2
        ctx.moveTo(64,149);
        ctx.lineTo(70,173);
        ctx.lineTo(179,244);
        ctx.lineTo(179,225);
        ctx.closePath();

        //左边的脸
        ctx.moveTo(48,235);
        ctx.lineTo(93,264);
        ctx.lineTo(92,293);
        ctx.lineTo(136,320);
        ctx.lineTo(136,454);
        ctx.lineTo(136,454);
        ctx.lineTo(68,406);
        ctx.closePath();

        //嘴巴
        ctx.moveTo(207,293);
        ctx.lineTo(207,394);
        ctx.lineTo(293,395);
        ctx.lineTo(294,293);
        ctx.lineTo(340,325);
        ctx.lineTo(340,468);
        ctx.lineTo(322,482);
        ctx.lineTo(294,417);
        ctx.lineTo(206,417);
        ctx.lineTo(180,480);
        ctx.lineTo(160,468);
        ctx.lineTo(160,325);
        ctx.closePath();

        //下巴
        ctx.moveTo(224,438);
        ctx.lineTo(276,438);
        ctx.lineTo(296,482);
        ctx.lineTo(205,482);
        ctx.closePath();

        //鼻子
        ctx.moveTo(211,179);
        ctx.lineTo(249,203);
        ctx.lineTo(290,180);
        ctx.lineTo(270,260);
        ctx.lineTo(270,369);
        ctx.lineTo(231,369);
        ctx.lineTo(232,260);
        ctx.closePath();

        //右边的脸
        ctx.moveTo(363,320);
        ctx.lineTo(407,293);
        ctx.lineTo(408,264);
        ctx.lineTo(452,234);
        ctx.lineTo(432,406);
        ctx.lineTo(364,453);
        ctx.lineTo(364,320);
        ctx.closePath();

        //右上角的眼睛
        ctx.moveTo(408,56);
        ctx.lineTo(486,56);
        ctx.lineTo(465,194);
        ctx.lineTo(364,259);
        ctx.lineTo(293,259);
        ctx.lineTo(314,163);
        ctx.lineTo(402,108);
        ctx.closePath();//最后一次和第一次拼接

        //右上角的眼睛里面的空白
        ctx.moveTo(444,101);
        ctx.lineTo(329,175);
        ctx.lineTo(329,196);
        ctx.lineTo(442,124);
        ctx.closePath();

        //右上角的眼睛里面的空白2
        ctx.moveTo(437,148);
        ctx.lineTo(321,223);
        ctx.lineTo(321,243);
        ctx.lineTo(433,172);
        ctx.closePath();

        //头上的宝石
        ctx.moveTo(117,56);
        //圆形
        ctx.lineTo(383,56);

        ctx.lineTo(378,93);
        ctx.lineTo(251,177);
        ctx.lineTo(122,93);
        ctx.closePath();

        //头上的宝石空白
        ctx.moveTo(194,79);
        ctx.lineTo(250,118);
        ctx.lineTo(306,79);
        //最后一个圆
        ctx.lineTo(194,79);

        ctx.stroke();
        ctx.fill();

    }
百度知道搜索结果的变形金刚JS特效,浏览器必须在IE8 或者Firefox、Chrome内核才能见到效果。 今日,备受关注的《变形金刚3》在中国首映了,大部分使用百度知道产品的人都会发现在百度知道检索“变形金刚”或“变形金刚3”,搜索结果会呈现一个动态代码版变形金刚。据了解,该创意由百度一位“刚粉”工程师用整整1天时间独立完成。 用户只要在百度知道检索“变形金刚”或“变形金刚3”,搜索结果中原本的文字链接就会组合成一个变形金刚出现在页面的右边,并且该“变形金刚”还会动态走向页面中间,伴随其脚步的停止,页面也会随之震动。 大量网友被这种新鲜的恶搞形式所吸引,纷纷前往围观。百度知道“变形”这一新鲜创意,也进一步激发起“刚粉”的观影热情。 由“刚粉”百度工程师一天研发而成 “百度知道变现”由百度一位“刚粉”工程师独立完成,他利用自己的周末业余时间,用整整1天时间完成开发这个代码版“变形金刚”产品。 生于1978年、从事Web前端研发的黄方荣是典型的“变形金刚”粉丝。他说,“变形金刚”承载了他很多难忘的童年记忆。在《变形金刚3》上映之际,“做一个酷的东西,献给自己,献给儿子,也献给那些同为‘刚粉’的朋友们”成为黄方荣近期闲暇之余想得最多的问题。 做个什么样的产品才能让所有人眼前一亮?擅长JavaScript开发的黄方荣突发奇想:不如用JavaScript代码写一段代码,让搜索结果化身为“变形金刚”!他计划首先将变形金刚的动作进行分解,再将饱满的动作形象转化成可以在技术上控制的点阵,最后用JavaScript代码来实现。 想起来简单,实际却很费神。整个开发,黄方荣手绘了40多张草图,描了不计其数的点阵,这保障了最终变形金刚变身的时候,动态效果更加逼真。而在代码实现之后,更麻烦的调试过程开始了,他需要不断调整点阵和代码,让恰当的字符在恰当的时间出现在恰当的位置上。整整忙碌了一天,黄方荣终于完美实现了自己的创意。 创意获百度副总裁亲口赞赏 仅三天上线 用技术改变这个世界、改变亿万人的生活,这是每一位百度工程师的梦想。黄方荣自然个人也相信:在日常繁杂的工作中,每一个新的想法,对产品的改进,都可能产生“蝴蝶效应”,影响数亿人的体验。 7月18日,黄方荣上班就在百度hi群里把自己周末的成果分享给了技术部门的同事,负责技术的百度副总裁王梦秋立即回复了一句话:“创意很酷,上线实现吧”。 三天之后,黄方荣完成了机器人呈现效果的优化,百度知道将这一创意上线的一刻,黄方荣兴奋不已,深深体会到了百度“简单可依赖”的文化。 一些网友用“太炫”、“太意外”、“太激动”等词汇表达惊奇感受。还有“刚粉”表示:“没想到在网页上,用编程可以让搜索结果组成变形金刚,会走动、会跺脚。最神奇的是连带着屏幕都能一起震动,非常好玩。”
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值