<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>哆啦A梦</title>
    <style type="text/css">
        canvas{margin:50px auto; display: block;}
    </style>
</head>
<body>
<canvas width="400" height="600" id="canvas"></canvas>
<script type="text/javascript">
    window.onload=function(){
        var cxt=document.getElementById('canvas').getContext('2d');
        cxt.beginPath();
        cxt.lineWidth=1;
        cxt.strokeStyle="black";
        cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);
        var head = cxt.createRadialGradient(260,25,8,200,175,175);
        head.addColorStop(0,"white");
        head.addColorStop(1,"#16B3DC");
        cxt.fillStyle=head;
        cxt.fill();
        cxt.stroke();
        //脸框
        cxt.beginPath();
        cxt.fillStyle="white";
        cxt.moveTo(110,110);
        cxt.quadraticCurveTo(-10,200,120,315);
        cxt.lineTo(280,315);
        cxt.quadraticCurveTo(410,210,290,110);
        cxt.lineTo(110,110);
        cxt.fill();
        cxt.stroke();
        //眼睛
        cxt.beginPath();
        cxt.lineWidth=1;
        cxt.fillStyle="white";
        cxt.moveTo(110,100);
        cxt.bezierCurveTo(110,25,200,25,200,100);
        cxt.bezierCurveTo(200,175,110,175,110,100);
        cxt.moveTo(200,100);
        cxt.bezierCurveTo(200,25,290,25,290,100);
        cxt.bezierCurveTo(290,175,200,175,200,100);
        cxt.fill();
        cxt.stroke();
        //鼻子
        cxt.beginPath();
        cxt.arc(200,165,25,0,2*Math.PI);
        var radial = cxt.createRadialGradient(212,155,3,200,165,25);
        radial.addColorStop(0,"white");
        radial.addColorStop(1,"#D05823");
        cxt.fillStyle=radial;
        cxt.fill();
        cxt.stroke();
        //眼珠
        cxt.beginPath();
        cxt.fillStyle="black";
        doraemon(cxt,230,130);
        cxt.fill();
        cxt.stroke();

        cxt.beginPath();
        cxt.fillStyle="black";
        doraemon(cxt,170,130);
        cxt.fill();
        cxt.stroke();

        //三须
        cxt.beginPath();
        cxt.moveTo(80,175);
        cxt.lineTo(150,195);
        cxt.moveTo(80,200);
        cxt.lineTo(150,205);
        cxt.moveTo(80,225);
        cxt.lineTo(150,215);
        cxt.moveTo(200,195);
        cxt.lineTo(200,290);

        cxt.moveTo(250,195);
        cxt.lineTo(320,175);
        cxt.moveTo(250,205);
        cxt.lineTo(320,200);
        cxt.moveTo(250,215);
        cxt.lineTo(320,225);
        cxt.moveTo(80,240);
        cxt.quadraticCurveTo(200,350,320,240);
        cxt.stroke();
        cxt.beginPath();
        cxt.moveTo(96,316);
        cxt.lineTo(305,316);

        cxt.lineTo(320,316);
        cxt.arcTo(330,316,330,326,10);
        cxt.lineTo(330,336);
        cxt.arcTo(330,346,305,346,10);
        cxt.lineTo(81,346);
        cxt.arcTo(71,346,71,336,10);
        cxt.lineTo(71,326);
        cxt.arcTo(71,316,81,316,10);
        cxt.lineTo(96,316);
        var neck = cxt.createLinearGradient(96,316,305,316);
        neck.addColorStop(0,"#B13209");
        neck.addColorStop(1,"white");
        cxt.fillStyle=neck;
        cxt.fill();
        cxt.stroke();

        //下身
        cxt.beginPath();
        cxt.fillStyle="#0BB0DA";
        cxt.moveTo(80,346);
        cxt.lineTo(26,406);
        cxt.lineTo(65,440);
        cxt.lineTo(85,418);
        cxt.lineTo(85,528);
        cxt.lineTo(185,528);
        cxt.bezierCurveTo(185,505,215,505,215,528);
        cxt.lineTo(315,528);
        cxt.lineTo(315,418);
        cxt.lineTo(337,440);
        cxt.lineTo(374,406);
        cxt.lineTo(320,346);
        cxt.fill();
        cxt.stroke();

        //左手掌
        cxt.beginPath();
        cxt.fillStyle='white';
        cxt.arc(32,438,32,0,2*Math.PI);
        cxt.fill();
        cxt.stroke();
        //右手掌
        cxt.beginPath();
        cxt.fillStyle='white';
        cxt.arc(368,438,32,0,2*Math.PI);
        cxt.fill();
        cxt.stroke();

        //肚兜
        cxt.beginPath();
        cxt.fillStyle="white";
        cxt.arc(200,399,90,1.8*Math.PI,1.2*Math.PI);
        cxt.fill();
        cxt.stroke();

        cxt.beginPath();
        cxt.moveTo(130,399);
        cxt.lineTo(270,399);
        cxt.bezierCurveTo(270,489,130,489,130,399);
        cxt.stroke();

        //胸前铃铛
        cxt.beginPath();
        cxt.arc(200,358,28,0,2*Math.PI);
        var neck = cxt.createRadialGradient(220,340,0,200,358,30);
        neck.addColorStop(0,"white");
        neck.addColorStop(1,"#F1EB55");
        cxt.fillStyle=neck;
        cxt.fill();
        cxt.stroke();

        cxt.beginPath();
        cxt.moveTo(178,340);
        cxt.lineTo(222,340);
        cxt.moveTo(173,349);
        cxt.lineTo(226,349);
        cxt.moveTo(200,367);
        cxt.lineTo(200,387);
        cxt.stroke();

        cxt.beginPath();
        cxt.fillStyle="black";
        cxt.arc(200,363,8,0,2*Math.PI);
        cxt.fill();
        cxt.stroke();

        //左脚
        cxt.beginPath();
        cxt.moveTo(85,528),
                cxt.lineTo(75,528),
                cxt.bezierCurveTo(50,528,50,562,75,562);
        cxt.lineTo(185,562);
        cxt.bezierCurveTo(204,562,204,528,185,528);
        cxt.stroke();
        //右脚
        cxt.beginPath();
        cxt.moveTo(215,528),
                cxt.bezierCurveTo(196,528,196,562,215,562);
        cxt.lineTo(325,562);
        cxt.bezierCurveTo(345,562,345,528,325,528);
        cxt.lineTo(315,528);
        cxt.stroke();

    }
    function doraemon(cxt,x,y){
        cxt.arc(x,y,12,0,2*Math.PI);
    }
    // doraemon();
</script>
</body>
</html>

哆啦A梦 canvas的更多相关文章

  1. Android用canvas画哆啦A梦

    先上图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  2. 创建【哆啦A梦】风格字体

    学习canvas,为作画.对于一个毫无逻辑思维的人简直遭罪啊~想象坐标坐标坐标啊- - 好啦言归正传,基于本月16号,在春熙路IFS展出120只哆啦a梦,以及canvas的作用,在此介绍一种PS的美化 ...

  3. 纯css画哆啦A梦

    今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...

  4. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  5. 哆啦A梦连连看游戏源码完整版

    这个源码是哆啦A梦连连看游戏源码完整版,也是安卓教程网android.662p.com分享过来的,哆啦A梦大家一定再熟悉不过了,这次登场的角色你能认出全部吗?赶紧把相同的小图标全部消除吧,一起体验下! ...

  6. 大雄和哆啦A梦

    题目:大雄和哆啦A梦题目介绍:这个图片名称有点奇怪?! 1,打开链接会看到大雄和哆啦A梦的照片,把它下载下来.就是下面这个图片. 2,用wireshark打开,会看到最后面出现 rar ,还有flag ...

  7. 哆啦A梦欺骗了你！浏览器CSS3测试遭质疑

    首先,说明,此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友,不要完全信任网络资源,依靠网络资源,我们需要利用网络资源的方便和可取的部分,结合自己的理解,学好,理解好! ...

  8. [openjudge-搜索]哆啦A梦的时光机

    题目描述 描述 哆啦A梦有一个神奇的道具:时光机.坐着它,大雄和他的伙伴们能穿越时空,回到过去或者去到未来. 有一天,大雄和他的伙伴们想穿越时空进行探险,可是时光机却出了一点故障,只能进行有限的时空穿 ...

  9. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

随机推荐

  1. ［摘抄］iOS App icon、启动页、图标规范

    以下内容都是我在做App时通过自己的经验和精品的分析得来的,希望会帮助到你.但是有时个别情况也要个别分析,要活学活用. 一. App  Icon 在设计iOS App Icon时,设计师不需要切圆角, ...

  2. Switch能否用string做参数？

    由于小编自己的编译环境jdk用的是比较高,在命令窗口输入java -version即可看到.(打开命令窗口win+R,输入cmd,回车) java version "1.8.0_111&qu ...

  3. 各种模板（part 2）

    堆: using namespace dui //堆 { #include<queue> //需要的库 priority_queue < int > Q; //定义一个Q的大根 ...

  4. jsp之tomcat安装

    安装时会碰到一个命令行窗口一闪而过的情况,里面内容是: Neither the JAVA_HOME nor the JRE_HOME environment variable is defined 是 ...

  5. [THINKING IN JAVA]访问权限控制

    6 访问权限控制 6.1 包:库单元 package.import.import *.import static: 修改classpath环境变量可以将自己写的类库添加至环境变量并在任何java程序中 ...

  6. 模板方法模式(Template Method Pattern)

    模板方法模式是一种基于继承的代码复用技术,定义一个操作中的算法的骨架,而将步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义算法的某些特定步骤. 模式中的角色 抽象类(Abstrac ...

  7. 黑客攻击常用CMD命令大全

    黑客常用命令大全net user heibai lovechina /add 加一个heibai的用户密码为lovechina net localgroup Administrators heibai ...

  8. MSSQL-实用小工具

    1.创建查询辅助表 create table nums (n int not null) alter table nums add constraint PK_NUMS primary key clu ...

  9. Visual studio智能感知挡住了当前代码输入行

    AssistX->Listboxes->Enable Visual Assist completion, suggestion and member list in .. 如果勾选了该项就 ...

  10. mysql多个时间戳字段默认值问题

    项目使用mysql数据库,在设计表时某张表有多个字段设计的类型是timestamp 但没有给默认值,在执行sql时报 timestamp Invalid default value for 'xxx' ...