<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>小叮当</title>

        <style>

            .container{

                margin: 0 auto;

                width: 800px;

            }

            body{

                margin: 0;

                padding: 0;

            }

            #doraemon{

                background-color: #fff;

                display: block;

            }

        </style>

    </head>

    <body onmousemove="zuobiao(event)">

        <div class="container">

        <canvas id="doraemon" width="600" height="600"></canvas>

        </div>

        <div id="put" style="width: 50px" height="20px"; ></div>

        <script>

            window.onload=function(){

                var cxt=document.getElementById('doraemon').getContext('2d');

                /*绘制小叮当头部*/

                cxt.beginPath();//开始作图标志

                cxt.lineWidth=1;//线宽为1

                cxt.strokeStyle='#000';//线条的颜色

                cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);

                cxt.fillStyle='#0bb0da';

                cxt.fill();

                cxt.stroke();//绘制路径

                /*画脸*/

                cxt.beginPath();

                cxt.fillStyle='#fff';

                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 = '#fff';

                cxt.moveTo(110, 110);

                cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//创建三次贝塞尔曲线,控制点1(110,25),控制点2(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.fillStyle="red";

               cxt.arc(170,130,15,0,2*Math.PI);

               cxt.fill();

               cxt.stroke();

               /*右眼球*/

               cxt.beginPath();

               cxt.fillStyle="red";

               cxt.arc(230,130,15,0,2*Math.PI);

               cxt.fill();

               cxt.stroke();

               /*鼻子*/

               cxt.beginPath();

               cxt.fillStyle="red";

               cxt.arc(200,165,25,0,2*Math.PI);

               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.stroke();

        /*嘴*/

                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);//在画布上创建介于两个切线之间的弧，起点坐标为(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);

               cxt.fillStyle = '#b13209';

               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.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 = '#fff';

        cxt.arc(37, 433, 30, 0, 2 * Math.PI);

        cxt.fill();

        cxt.stroke();

        //右手

        cxt.beginPath();

        cxt.fillStyle = '#fff';

        cxt.arc(363, 433, 30, 0, 2 * Math.PI);

        cxt.fill();

        cxt.stroke();

        /*肚*/

        cxt.beginPath();

        cxt.fillStyle = '#fff';

        cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);

        cxt.fill();

        cxt.stroke();

        //小口袋

        cxt.beginPath();

        cxt.fillStyle = '#fff';

        cxt.moveTo(130, 394);

        cxt.lineTo(270, 394);

        cxt.moveTo(130, 394);

        cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);

        cxt.fill();

        cxt.stroke();

        /*两只脚的空隙*/

        cxt.beginPath();

        cxt.fillStyle = '#fff';

        cxt.arc(200, 529, 20,Math.PI, 0);

        cxt.fill();

        cxt.stroke();

        /*脚*/

        //左脚

        cxt.beginPath();

        cxt.fillStyle='#fff';

        cxt.moveTo(180,528);

        cxt.lineTo(72,528);

        cxt.bezierCurveTo(52,528,52,558,72,558);

        cxt.lineTo(180,558);

        cxt.moveTo(180,558);

        cxt.bezierCurveTo(200,558,200,528,180,528);

        cxt.fill();

        cxt.stroke();

        //右脚

        cxt.beginPath();

        cxt.fillStyle='#fff';

        cxt.moveTo(220,528);

        cxt.lineTo(328,528);

        cxt.bezierCurveTo(348,528,348,558,328,558);

        cxt.lineTo(220,558);

        cxt.moveTo(220,558);

        cxt.bezierCurveTo(200,558,200,528,220,528);

        cxt.fill();

        cxt.stroke();

            }

            function zuobiao(event){

                var x=event.clientX;

                var y=event.clientY;

                var out=document.getElementById("put");

                out.innerHTML="x:"+x+"y:"+y;

            }

        </script>

    </body>

</html>

canvas画小叮当的更多相关文章

  1. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  2. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  3. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  5. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  7. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  8. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  9. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

随机推荐

  1. 结队开发之NABCD

    我们的产品小工具集合是为了解决办公室办公人员缺少一些快捷操作的痛苦,他们需要在不用登陆QQ或者QQ浏览器的情况下实现截图功能,但是现有的方案并没有很好地解决这些需求,我们有独特的办法,小工具集合中提供 ...

  2. 报表工具highcharts使用心得

    公司让做一个报表页面,搜索了下发现highcharts比较符合业务需求,下面就说一下使用心得. $('#container').highcharts({ title: { text: '部门统计图' ...

  3. scrapy_redis项目配置

    一.创建普通scrapy项目 二.spiders爬虫文件中修改项 import scrapy from XX.items import XXItem import json # ----1 导入类 f ...

  4. Java ASM 技术简介

    什么是ASM ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能.ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机之前动态改变类行为. ...

  5. springboot配置文件（.yml）中自定义属性值并在controller里面获取

    1,由于项目需要,学习了新的框架--springboot,顺便练习一下在.yml中配置自定义属性并在controller里面获取.(以下的Springboot框架我已经搭建好,就不在陈述) 2,spr ...

  6. 【原创】Arduino入门基础知识总结

     一.概述   Arduino是源自意大利的一个开放源代码的硬件项目平台,该平台包括一块具备简单I/O功能的电路板以及一套程序开发环境软件. Arduino可以用来开发交互产品,比如它可以读取大量的开 ...

  7. vue启动报错

    在安装依赖后,启动时报错 修复方法:将项目node_modules文件夹删除掉,重新cnpm install即可

  8. zt secureCRT serialNo

    Name: ygeR Company: TEAM ZWT SerialNumber: 03-77-119256 License Key: ABH2MJ 9YVAC5 Z17QF7 4ZAS7Z ABG ...

  9. Struts2 action 跳转到web-inf下，

    初学,这个问题困扰了1天.刚开始以为代码或者是配置文件哪里写错了,仔细检查了好几遍确定代码没有错,实在没办法了,准备发帖求助.就在我截图的时候,突然发现我的@Action中有点别扭,即使他没有报错. ...

  10. 利用python执行shell脚本 并动态传参 及subprocess基本使用

    最近工作需求中 有遇到这个情况  在web端获取配置文件内容 及 往shell 脚本中动态传入参数 执行shell脚本这个有多种方法   最后还是选择了subprocess这个python标准库 su ...