html5 canvas 实现一个简单的叮当猫头部
html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例。虽然在这一块几乎空白,但还是乐于尝试......
效果如下:
代码如下:
<div class="doraemon">
<canvas id="face" width="600" height="1500">您的浏览器不支持canvas</canvas>
</div>
<script>
var face = document.getElementById('face').getContext("2d");
face.arc(252,252,250,0,360*Math.PI/180);
face.fillStyle = '#07beea'; //设置填充颜色
face.fill(); //填充
face.lineWidth = 2; //轮廓线宽度
face.strokeStyle = '#333'; //轮廓线颜色
face.stroke(); //画轮廓线 face.beginPath(); //重置当前绘画路径
face.moveTo(160,450); //画笔移动到起始点
face.bezierCurveTo(0,400,0,110,210,115); //三次贝塞尔曲线(左边)
face.lineTo(290,115);
face.bezierCurveTo(500,110,500,400,340,450);
face.bezierCurveTo(280,470,220,470,160,450);
face.fillStyle = '#fff';
face.fill();
face.stroke(); //画出边框 face.beginPath(); //重置当前绘画路径 用于画眼睛和鼻子
face.moveTo(150,150);
face.lineTo(150,100); //左眼左竖线
face.bezierCurveTo(160,50,240,50,250,100); //左眼下面
face.lineTo(250,150); //左眼右竖线
face.bezierCurveTo(240,200,160,200,150,150); //左眼上面
face.moveTo(250,150);
face.lineTo(250,100); //右眼左竖线
face.bezierCurveTo(260,50,340,50,350,100); //右眼上面
face.lineTo(350,150); //右眼右竖线
face.bezierCurveTo(340,200,260,200,250,150); //右眼下面
face.fillStyle = '#fff';
face.fill();
face.stroke(); face.beginPath();
face.arc(225,155,10,0,360*Math.PI/180); //眼珠
face.arc(275,155,10,0,360*Math.PI/180);
face.fillStyle = '#333';
face.fill(); face.beginPath(); //鼻子
face.arc(250,197,25,0,360*Math.PI/180);
face.fillStyle = '#c93e00';
face.fill();
face.stroke(); face.beginPath();
face.arc(260,190,10,0,360*Math.PI/180);
var grd = face.createRadialGradient(260,190,2,260,190,10); //设置内外圆原点和半径
grd.addColorStop(0,'#fff');
grd.addColorStop(1,'#c93e00');
face.fillStyle = grd;
face.fill(); //嘴巴
face.beginPath();
face.moveTo(250,222);
face.lineTo(250,395);
face.moveTo(100,320);
face.bezierCurveTo(180,420,320,420,400,320);
face.lineWidth = 3;
face.stroke(); //胡须
face.beginPath();
face.moveTo(80,200);
face.lineTo(180,220);
face.moveTo(80,245);
face.lineTo(180,245);
face.moveTo(80,290);
face.lineTo(180,270); face.moveTo(320,220);
face.lineTo(420,200);
face.moveTo(320,245);
face.lineTo(420,245);
face.moveTo(320,270);
face.lineTo(420,290);
face.stroke(); </script>
html5 canvas 实现一个简单的叮当猫头部的更多相关文章
- 怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- [译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
- 用HTML5 Canvas做一个画图板
使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 功能很简单,原理其实和拖放是类似的,主要是 ...
- HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
- 用Canvas写一个简单的游戏--别踩白块儿
第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...
- 手对手的教你用canvas画一个简单的海报
啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...
- 原生js 基于canvas写一个简单的前端 截图工具
先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
随机推荐
- Android 进程和线程
进程和线程 如果某个应用程序组件是第一次被启动,且这时应用程序也没有其他组件在运行,则Android系统会为应用程序创建一个包含单个线程的linux进程.默认情况下,同一个应用程序的所有组件都运行在同 ...
- android取得所在位置的经纬度
android提供了LocationManager来取得位置,用LocationListener来监听位置的变化 先做一些初始化工作: /** latitude and longitude of cu ...
- AFNetworking 保存Cookie Session 和 Webview 共享Cookie
1, 请求并携带SessionId, 代码如下: //当请求成共后调用如下代码, 保存Cookie NSArray *cookies = [[NSHTTPCookieStorage sharedHTT ...
- python成长之路——第二天
cpython:c解释器 .pyc(字节码)——机器码 jpython :java解释器 java字节码 ironpython :C#解释器 C#字节码 .... 上面的:编译完之后 ...
- HDU 3923 Invoker 【裸Polya 定理】
参考了http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 的模板 对于每一种染色,都有一个等价群,例如旋转, ...
- Codeforces 489C Given Length and Sum of Digits...
m位长度,S为各位的和 利用贪心的思想逐位判断过去即可 详细的注释已经在代码里啦~ //#pragma comment(linker, "/STACK:16777216") //f ...
- Week5(10月10日):国庆之后,让我们整装期待元旦吧
Part I:提问 =========================== 1.要将“Hello, Admin",从控制器传递到视图,该如何操作? (1)使用ViewData (2)使用V ...
- 在Struts 2中实现IoC
IoC(Inversion of Control,以下译为控制反转)随着Java社区中轻量级容器(Lightweight Contianer)的推广而越来越为大家耳熟能详.在此,我不想再多费唇舌来解释 ...
- Visual Studio 2015编译安装配置QT5.5.1(含QTWEBKIT)
尽管QT5.5.1和VisualStudio 2015都已经发布很久了,但是QT项目组视乎不会为QT5.5.1专门发布预编译的QT5.5.1 for windows(2015)版本的,也不会专门发布V ...
- 使用jquery获取ul的li的值赋值
jquery:$('#dropdownMenu1').val(str);不jquery:document.getElementById('dropdownMenu1').value = str;