<!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. 创建【哆啦A梦】风格字体

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

  2. 纯css画哆啦A梦

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

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

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

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

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

  5. 大雄和哆啦A梦

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

  6. 用canvas画“哆啦A梦”时钟

    前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的he ...

  7. 一言不合敲代码(1)——DIV+CSS3制作哆啦A梦头像

    先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...

  8. 多拉A梦——日语歌词

    こんなこといいな できたらいいな 这件事真好啊 能够做到的话就好啦 あんな梦(ゆめ) こんな梦(ゆめ) いっぱいあるけど 那样的梦想 这样的梦想 我还有好多哪 みんなみんなみんな かなえてくれる 大家 ...

  9. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

随机推荐

  1. 平台之大势何人能挡? 带着你的Net飞奔吧!

    镇楼图: 跨平台系列: Linux基础 1.Linux基础学习 By dnt http://www.cnblogs.com/dunitian/p/4822807.html 环境配置 1.Hyper-v ...

  2. c#线程带参数

    c#线程带参数 ThreadStart threadStart = delegate { LoadPicture(ds.Tables[0]); }; Thread thread = new Threa ...

  3. python3.5------day4--function

    函数 函数的作用: 1.减少重复代码 2.扩展性强 3.使程序变的可维护 函数的定义: def test(): print("I'm yao") #def 是固定的,test为函数 ...

  4. Mysql存储过程查询结果赋值到变量的方法

    Mysql存储过程查询结果赋值到变量的方法   把查询结果赋值到变量,大部分情况下使用游标来完成,但是如果明确知道查询结果只有一行(例如统计记录的数量,某个字段求和等),其实可以使用set或into的 ...

  5. tcpproxy:基于 Swoole 实现的 TCP 数据包转发工具的方法

    假设我们希望有一台机器A(ip 192.168.1.101)要开放端口6379给用户访问,但可能实际情况是用户无法直接访问到A(ip 192.168.1.101), 但却有一台机器B(ip 192.1 ...

  6. 深入浅出Attribute (转载)

    原文地址:http://blog.csdn.net/FantasiaX/article/details/1627694 正文: 什么是Attribute?Attribute是干什么使的?Attribu ...

  7. poj1008_Maya_Calendar

    历法的转换. #include <stdio.h> #include <math.h> #include <string.h> ][]={ "pop&qu ...

  8. Dubbo原理和源码解析之标签解析

    一.Dubbo 配置方式 Dubbo 支持多种配置方式: XML 配置:基于 Spring 的 Schema 和 XML 扩展机制实现 属性配置:加载 classpath 根目录下的 dubbo.pr ...

  9. ffmpeg相关函数整理

    1.av_read_frame() 该函数用于读取具体的音/视频帧数据,从流中读取数据帧到 AVPacket,AVPacket保存仍然是未解码的数据 int av_read_frame(AVForma ...

  10. android studio 运行项目时waiting for target device to come online

    cmd进入命令行,进入adb所在的目录下: 或者在Terminal中输入命令: adb kill-server adb start-server