Canvas 小岳岳(我的天呀!)

认真你就输了丶
认真你就输了丶 发布于 2016-11-30 14:57:42 浏览:3457 类型:原创 - 随笔 分类:HTML/CSS - canvas 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>岳云鹏</title>
    <style type="text/css">
        div{
            width: 400px;
            height:400px;
            margin:100px auto;
        }

    </style>
</head>
<body>
    <div>
        <canvas id="demo" width="400px" height="400px"></canvas>
    </div>



    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script>
        //第一步:获取canvas元素
        var canvasDom = document.getElementById("demo");
        //第二步:获取上下文
        var cet = canvasDom.getContext('2d');
        //第三步:开始绘制
        /* 中心轴 130 */
        /* 面部 头发*/
        cet.beginPath();
        cet.moveTo(70, 90);
        cet.quadraticCurveTo(130,30,187,90);
        cet.quadraticCurveTo(160,85,143,88);
        cet.quadraticCurveTo(132,89,130,95);
        cet.quadraticCurveTo(132,89,117,88);
        cet.quadraticCurveTo(100,85,70,90);
        cet.fillStyle="#3e0d09";
        cet.fill();
        cet.stroke();


        /* 轮廓*/
        cet.beginPath();
        cet.moveTo(70, 90);
        cet.quadraticCurveTo(65,99,65,106);
        cet.quadraticCurveTo(70,144,68,186);
        cet.quadraticCurveTo(75,210,130,213);
        cet.quadraticCurveTo(185,210,191,186);
        cet.quadraticCurveTo(190,144,192,106);
        cet.quadraticCurveTo(194,98,187,90);
        cet.quadraticCurveTo(160,85,143,88);
        cet.quadraticCurveTo(132,89,130,95);
        cet.quadraticCurveTo(132,89,117,88);
        cet.quadraticCurveTo(100,85,70,90);
        cet.fillStyle="#fde9ea";
        cet.fill();
        cet.stroke();


        /* 左面眉毛 */
        cet.beginPath();
        cet.moveTo(90, 130);
        cet.quadraticCurveTo(96,113,115,130);
        cet.quadraticCurveTo(117,131,113,133);
        cet.quadraticCurveTo(96,120,90,130);
        cet.fillStyle="#614248";
        cet.fill();
        cet.stroke();

        /* 右面眉毛 */
        cet.beginPath();
        cet.moveTo(170, 130);
        cet.quadraticCurveTo(165,113,145,130);
        cet.quadraticCurveTo(143,131,147,133);
        cet.quadraticCurveTo(164,120,170,130);
        cet.fillStyle="#614248";
        cet.fill();
        cet.stroke();

        /* 左面眼睛 */
        cet.beginPath();
        cet.lineWidth=3;
        cet.strokeStyle="#431b24";
        cet.moveTo(88, 148);
        cet.lineTo(115,150);
        cet.moveTo(107, 150);
        cet.quadraticCurveTo(104,157,101,150);
        cet.fillStyle="#431b24";
        cet.fill();
        cet.stroke();

        /* 右面眼睛 */
        cet.beginPath();
        cet.lineWidth=3;
        cet.strokeStyle="#431b24";
        cet.moveTo(172, 148);
        cet.lineTo(145,150);
        cet.moveTo(153, 150);
        cet.quadraticCurveTo(156,157,159,150);
        cet.fillStyle="#431b24";
        cet.fill();
        cet.stroke();

        /* 鼻子 */
        cet.beginPath();
        cet.lineWidth=1;
        cet.moveTo(120, 163);
        cet.quadraticCurveTo(120,165,122,170);
        cet.quadraticCurveTo(130,172,138,170);
        cet.quadraticCurveTo(140,165,140,163);
        cet.stroke();

        /* 嘴 */
        cet.beginPath();
        cet.moveTo(111, 180)
        cet.quadraticCurveTo(130,197,149,180);
        cet.stroke();

        /* 左耳朵*/
        cet.beginPath();
        cet.moveTo(69, 148);
        cet.quadraticCurveTo(53,140,58,166);
        cet.quadraticCurveTo(59,170,58,175);
        cet.quadraticCurveTo(57,183,68,184);
        cet.moveTo( 68,165 );
        cet.quadraticCurveTo(65,158,60,160);
        cet.moveTo(68,175 );
        cet.quadraticCurveTo(60,170,62,165);
        cet.fillStyle="#fde9ea";
        cet.fill();
        cet.stroke();

        /* 右耳朵 */
        cet.beginPath();
        cet.moveTo(191, 148);
        cet.quadraticCurveTo(207,140,202,166);
        cet.quadraticCurveTo(201,170,202,175);
        cet.quadraticCurveTo(203,183,192,184);
        cet.moveTo( 192,165 );
        cet.quadraticCurveTo(195,158,200,160);
        cet.moveTo(192,175 );
        cet.quadraticCurveTo(200,170,198,165);
        cet.fillStyle="#fde9ea";
        cet.fill();
        cet.stroke();

        /* 身体 */
        cet.beginPath();
        cet.moveTo(100, 210);
        cet.quadraticCurveTo(85,218,70,240);
        cet.quadraticCurveTo(73,270,115,276);
        cet.quadraticCurveTo(180,283,190,240);
        cet.quadraticCurveTo(175,218,160,210);
        cet.quadraticCurveTo(130,218,100,210);
        cet.fillStyle="#949dd4";
        cet.fill();
        cet.stroke();

        /* 衣服 */
        cet.beginPath();
        cet.moveTo(80, 260);
        cet.quadraticCurveTo(80,240,100,230);
        cet.moveTo(106, 235);
        cet.quadraticCurveTo(95,233,95,220);
        cet.moveTo(100, 230);
        cet.quadraticCurveTo(125,230,130,220);
        cet.moveTo(120, 217);
        cet.quadraticCurveTo(130,221,140,217);
        cet.moveTo(125, 215);
        cet.lineTo(135, 220);
        cet.moveTo(135, 215);
        cet.lineTo(125, 220);
        cet.stroke();

        /* 左 脸庞 */
        cet.beginPath();
        cet.moveTo(80, 170);
        cet.quadraticCurveTo(78,167,80,165);
        cet.quadraticCurveTo(87,163,95,165);
        cet.quadraticCurveTo(98,167,95,170);
        cet.quadraticCurveTo(87,172,80,170);
        cet.fillStyle="#e8afb9";
        cet.fill();

        /* 右 脸庞 */
        cet.beginPath();
        cet.moveTo(180, 170);
        cet.quadraticCurveTo(182,167,180,165);
        cet.quadraticCurveTo(173,163,165,165);
        cet.quadraticCurveTo(162,167,165,170);
        cet.quadraticCurveTo(173,172,180,170);
        cet.fillStyle="#e8afb9";
        cet.fill();

        /* 字 */
        cet.font="40px Georgia";

        var grd=cet.createLinearGradient(210,0,300,300);
        grd.addColorStop(0,"#FF0000");
        grd.addColorStop("0.3","magenta");
        grd.addColorStop("0.5","blue");
        grd.addColorStop("0.6","green");
        grd.addColorStop("0.8","yellow");
        grd.addColorStop(1,"#00FF00");
        cet.fillStyle=grd;

        var time=1;
        setInterval(function(){
            if(time==7){
                cet.clearRect(210, 0, 300, 400)
                time=0
            }
            if(time==1){
                cet.fillText("妮",250,100);
            }
            if(time==2){
                cet.fillText("儿",250,150);
            }
            if(time==3){
                cet.fillText("弄",250,200);
            }
            if(time==4){
                cet.fillText("啥",250,250);
            }
            if(time==5){
                cet.fillText("嘞",250,300);
            }
            if(time==5){
                cet.fillText(" !",250,350);
            }
            time++;
        },300)
    </script>

</body>
</html>
z
给个赞 41 人点赞
收藏 23 人收藏
评论 已有 16 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
鲁班code
鲁班code2016-11-30 16:05:281F
emoticon他有这么瘦
举报 支持 (1) 回复 (1)
认真你就输了丶
认真你就输了丶2016-11-30 16:07:292F
最近在减肥emoticonemoticon //@鲁班codeemoticon他有这么瘦
举报 支持 (1) 回复 (0)
最新评论
zhuoyuansheng
zhuoyuansheng2017-01-14 16:26:4516F
哈哈  这个厉害l了
举报 支持 (0) 回复 (0)
452215551
4522155512017-01-12 11:41:3415F
准备上五环!
举报 支持 (0) 回复 (0)
aa8773276
aa87732762016-12-08 16:50:3614F
天空飘来五个字 你在弄啥类
举报 支持 (0) 回复 (0)
tuihou123321
tuihou1233212016-12-05 14:41:2113F
test //@二呆:厉害了word哥,研究了一下午终于把quadraticCurveTo搞明白了emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-12-02 08:37:2212F
你头像也萌萌哒emoticon //@Queen_5200:萌萌哒
举报 支持 (0) 回复 (0)
Queen_5200
Queen_52002016-12-02 08:34:1911F
萌萌哒
举报 支持 (0) 回复 (1)
认真你就输了丶
认真你就输了丶2016-12-01 17:55:1010F
厉害了word姐,emoticon //@二呆:厉害了word哥,研究了一下午终于把quadraticCurveTo搞明白了emoticon
举报 支持 (0) 回复 (0)
二呆
二呆2016-12-01 17:41:149F
厉害了word哥,研究了一下午终于把quadraticCurveTo搞明白了emoticon
举报 支持 (0) 回复 (2)
恭宽信
恭宽信2016-12-01 15:48:278F
还是很棒的 //@认真你就输了丶:没有弄字体样式emoticon //@恭宽信:都挺好  就字儿太丑了emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-12-01 15:23:307F
没有弄字体样式emoticon //@恭宽信:都挺好  就字儿太丑了emoticon
举报 支持 (0) 回复 (1)
恭宽信
恭宽信2016-12-01 15:22:046F
都挺好  就字儿太丑了emoticon
举报 支持 (0) 回复 (1)
认真你就输了丶
认真你就输了丶2016-12-01 14:14:295F
emoticon //@lyj4532556:天空一声巨响,楼主闪亮登场
举报 支持 (0) 回复 (0)
lyj4532556
lyj45325562016-12-01 12:34:214F
天空一声巨响,楼主闪亮登场
举报 支持 (0) 回复 (1)
a735900718
a7359007182016-11-30 22:54:263F
66666666666emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-11-30 16:07:292F
最近在减肥emoticonemoticon //@鲁班codeemoticon他有这么瘦
举报 支持 (1) 回复 (0)
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新