哆啦A梦 canvas
<!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的更多相关文章
- Android用canvas画哆啦A梦
先上图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 创建【哆啦A梦】风格字体
学习canvas,为作画.对于一个毫无逻辑思维的人简直遭罪啊~想象坐标坐标坐标啊- - 好啦言归正传,基于本月16号,在春熙路IFS展出120只哆啦a梦,以及canvas的作用,在此介绍一种PS的美化 ...
- 纯css画哆啦A梦
今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- 哆啦A梦连连看游戏源码完整版
这个源码是哆啦A梦连连看游戏源码完整版,也是安卓教程网android.662p.com分享过来的,哆啦A梦大家一定再熟悉不过了,这次登场的角色你能认出全部吗?赶紧把相同的小图标全部消除吧,一起体验下! ...
- 大雄和哆啦A梦
题目:大雄和哆啦A梦题目介绍:这个图片名称有点奇怪?! 1,打开链接会看到大雄和哆啦A梦的照片,把它下载下来.就是下面这个图片. 2,用wireshark打开,会看到最后面出现 rar ,还有flag ...
- 哆啦A梦欺骗了你！浏览器CSS3测试遭质疑
首先,说明,此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友,不要完全信任网络资源,依靠网络资源,我们需要利用网络资源的方便和可取的部分,结合自己的理解,学好,理解好! ...
- [openjudge-搜索]哆啦A梦的时光机
题目描述 描述 哆啦A梦有一个神奇的道具:时光机.坐着它,大雄和他的伙伴们能穿越时空,回到过去或者去到未来. 有一天,大雄和他的伙伴们想穿越时空进行探险,可是时光机却出了一点故障,只能进行有限的时空穿 ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
随机推荐
- 计算机网络自学之路------IP协议(2)
之前忘记说了,这些内容都是边看视频边写的,视频出自西安交通大学. 本期说的是IP分组转发的内容,里面详细介绍了IP协议跟ARP协议,最后再给出一个例子,说明这两个协议在网络中传输的具体过程. 1)Ip ...
- 关于从jsp 中 引用 js 中的里层function
在需要引用的方法里: 需要引用的方法 function (){ new js中的父方法().子方法(参数) }
- jsp中查询条件的回显
后台框架为ssh,前台纯手写无框架是最老的写法,因为是接手别人的项目无法改变框架原型,只能基于修改. 进入正题: 我这里查询条件有两种input的text(文本框)和select(下拉框). 1.te ...
- Quartz2D之绘制一个简单的机器猫
学习iOS有一段时间了,在博客园也默默的潜水了两个月,见识了很多大神,收获不少. 今天整理笔记,发现忘记的不少,我感觉需要及时的整理一下了,同时也把做的小东西贴上来和大家分享一下. 最近学习了Quar ...
- NewQuant的设计（一）——整体的领域设计
NewQuant的设计思路——整体的领域分析 “领域驱动设计(DDD)”是著名软件工程建模专家Eric Evans提出的一个重要概念,是“面向对象分析设计(OOAD)”的深化.当业务逻辑变得复杂,系统 ...
- c# List的排序
list 是我们常用到的数据类型,我们常常会用list去处理很多的数据.我们也常常会有这样的一个操作,就是排序sort list 所在的命名空间是System.Collections.Generic ...
- Eclipse启动tomcat时出现报错-拒绝访问
今天新建项目,当选择项目的发布路径为tomcat的路径时 启动tomcat出现如下错误: Publishing the configuration... Error copying file to D ...
- NSString和NSMutableString常用方法+NSArray常用代码 (转)
常见的NSString和NSMutableString方法: NSString方法: [plain] view plaincopy +(id) stringWithContentsOfFile:p ...
- -Three.js开发指南---用three.js创建你的第一个三维场景（第一章）
本章主要做了下面的工作 1 生成一个简单的场景,该场景的物体只有平面和坐标轴 2 在第一个demo的基础上添加光源和方块物体,并生成阴影 3 在第二个demo的基础上,增加动画,使得方块进行旋转 4 ...
- [Linux] - centos使用mount + nfs 远程共享存储
服务端安装nfs 1.使用yum安装nfs yum install nfs-utils nfs-utils-lib -y 如果安装过程出现这样的错误: 得先安装lvm2 yum install -y ...