html5制作叮当猫,HTML5 canvas画简单的叮当猫头
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的叮当猫头部。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
效果如下:
代码如下:
您的浏览器不支持canvas
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();
本文转载自:https://www.cnblogs.com/jr1993/p/4623224.html
html5制作叮当猫,HTML5 canvas画简单的叮当猫头相关推荐
- html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
- html5制作线路图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等 最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图 何问起 canvas画简单电路图 by 何问起 [相关推荐] 1. 特别推荐:"php程序员工具箱& ...
- html5中怎么使用canvas画空心圆与实心圆
这篇文章主要介绍"html5中怎么使用canvas画空心圆与实心圆"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"html5中怎么 ...
- html5制作线路图,HTML5画电路图
画图API的应用,线,圆等 http://t.cn/RGfhSlO 1.[代码][JavaScript]代码 何问起 var canvas = document.getElementById(&quo ...
- html5 制作神器,HTML5/Canvas 简单的泡沫生成器
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById('mainc'); var con ...
- 在线html5制作场景,html5 canvas超逼真3d动画场景
这是一个使用Html5 canvas制作的相当真实的3d动画场景效果.canvas由js在运行时动态生成. HTML Look around by dragging and holding the m ...
- canvas画简单的横向流程图
开发思路 最近,因为在做基于MES系统进行工业互联网开发的项目:其中,在做demo时,我负责工序管理的开发,其中有一个功能是通过一个物料SFC码可以追踪该物料所经历的所有工序:网上有很多插件,比如D3 ...
- 怎么用html5制作申请表,html-5 表格的制作
<html-5 表格的制作>由会员分享,可在线阅读,更多相关<html-5 表格的制作(6页珍藏版)>请在人人文库网上搜索. 1.教学项目五 HTML中表格的制作[教学内容]讲 ...
- html5 制作太阳系,html5做的太阳系
效果图: 源代码: 你的浏览器不支持canvas var canvas=document.getElementById("canvas"); var cxt=canvas.getC ...
- uni-app 利用canvas画简单海报并保存图片
一.效果图 二.代码 <template><view class="canvas-box"><canvas class="canvas&q ...
最新文章
- win10 动态磁盘 linux,win10系统动态磁盘改为基本磁盘的方法
- jboss5.1安全性配置_使用Java EE安全性和JBoss AS 7.x保护JSF应用程序的安全
- 数据结构--链表--单链表中环的检测,环的入口,环的长度的计算
- SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果
- linux-bzip2压缩
- 杨辉三角(完整代码)
- linux用mame玩游戏,Ubuntu下用kxmame运行精彩的街机游戏
- Jetty入门(1-1)Jetty入门教程
- 如果手里有20万是放银行吃利息还是投资比较合适?
- android 打开SD卡文件夹,并获得选中文件的路径怎么实现?
- Spring中的面向切面(AOP)
- 【元胞自动机】基于matlab激进策略元胞自动机三车道(不开放辅路,软件园影响)交通流模型【含Matlab源码 1297期】
- 朋友:趣头条上市了!我:谁?
- 按条件爬取百度百科词条及其相关词条的ID
- 华东理工大学本科毕业论文答辩和论文选题PPT模板
- Easy_CHM生成CHM时出现的目录和索引中文乱码脚本错误
- TRANSFORMER-TRANSDUCER:END-TO-END SPEECH RECOGNITION WITH SELF-ATTENTION
- python 生成器、列表/字典/集合解析式区别
- 从 HTTP 瞎逼逼到 HTTP/2
- 百度网盘真实地址解析(告别下载百度网盘)