//获取页面元素

var canvas = document.getElementById('abc');

//获取渲染上下文

var con = canvas.getContext('2d');

//阴影

con.shadowBlur = 20;

con.shadowColor = 'red';

con.shadowOffsetX = 20;

con.shadowOffsetY = 20;

//绘制头部背景

con.beginPath();

con.fillStyle = 'rgb(8,189,234)';

con.strokeStyle = 'black';

con.lineWidth = 2;

con.arc(300, 300, 200, 0, Math.PI * 2, false);

con.stroke();

con.fill();

//绘制脸

//去阴影

con.shadowBlur = 0;

con.shadowColor = 'white';

con.shadowOffsetX = 0;

con.shadowOffsetY = 0;

con.beginPath();

con.moveTo(300, 180);

con.bezierCurveTo(100, 180, 60, 450, 300, 465);

con.bezierCurveTo(540, 450, 500, 180, 300, 180);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'white';

con.fill();

//绘制右眼

con.beginPath();

con.moveTo(262, 145);

con.bezierCurveTo(212, 145, 212, 245, 262, 245);

con.bezierCurveTo(312, 245, 312, 145, 262, 145);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'white';

con.fill();

//绘制左眼

con.beginPath();

con.moveTo(338, 145);

con.bezierCurveTo(388, 145, 388, 245, 338, 245);

con.bezierCurveTo(288, 245, 288, 145, 338, 145);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'white';

con.fill();

//绘制左眼珠

con.beginPath();

con.arc(280, 220, 10, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'black';

con.fill();

//绘制右眼珠

con.beginPath();

con.arc(320, 220, 10, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'black';

con.fill();

//绘制鼻子

con.beginPath();

con.arc(300, 256, 23, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = '#c93e00';

con.fill();

//绘制鼻子上的反光圆

con.beginPath();

con.arc(309, 246, 4, 0, Math.PI * 2, false);

con.fillStyle = 'white';

con.fill();

//左边胡子

con.beginPath();

con.moveTo(165, 270);

con.lineTo(235, 285);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(165, 310);

con.lineTo(235, 310);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(165, 350);

con.lineTo(235, 340);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

//右边胡子

con.beginPath();

con.moveTo(435, 270);

con.lineTo(365, 285);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(435, 310);

con.lineTo(365, 310);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(435, 350);

con.lineTo(365, 340);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

//鼻线

con.beginPath();

con.moveTo(300, 280);

con.lineTo(300, 435);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

//嘴巴

con.beginPath();

con.moveTo(185, 375);

con.quadraticCurveTo(220, 435, 300, 435)

con.strokeStyle = 'black';

con.stroke();

con.beginPath();

con.moveTo(300, 435);

con.quadraticCurveTo(380, 435, 415, 370)

con.strokeStyle = 'black';

con.stroke();

//下半身

//左边手

con.beginPath();

con.lineWidth = 60;

con.moveTo(200, 470);

con.lineTo(100, 600);

con.strokeStyle = 'rgb(8,189,234)';

con.stroke();

con.closePath();

con.beginPath();

con.lineWidth = 1;

con.strokeStyle = 'black';

con.arc(90, 610, 35, 0, Math.PI * 2, false);

con.fillStyle = 'white';

con.stroke();

con.fill();

//阴影

con.shadowBlur = 20;

con.shadowColor = 'red';

con.shadowOffsetX = 20;

con.shadowOffsetY = 20;

//右边手

con.beginPath();

con.lineWidth = 60;

con.moveTo(400, 470);

con.lineTo(500, 600);

con.strokeStyle = 'rgb(8,189,234)';

con.stroke();

con.closePath();

con.beginPath();

con.lineWidth = 1;

con.strokeStyle = 'black';

con.arc(510, 610, 35, 0, Math.PI * 2, false);

con.fillStyle = 'white';

con.stroke();

con.fill();

//去阴影

con.shadowBlur = 0;

con.shadowColor = 'white';

con.shadowOffsetX = 0;

con.shadowOffsetY = 0;

//腿

con.fillStyle = 'rgb(8,189,234)';

con.fillRect(150, 485, 300, 250);

//肚子

con.beginPath();

con.fillStyle = 'white';

con.arc(300, 560, 100, 0, Math.PI * 2, false);

con.fill();

//腿岔

con.beginPath();

con.lineWidth = 1;

con.strokeStyle = 'black';

con.fillStyle = 'white';

con.arc(300, 710, 20, 0, Math.PI * 2, false);

con.stroke();

con.fill();

//阴影

con.shadowBlur = 20;

con.shadowColor = 'red';

con.shadowOffsetX = 20;

con.shadowOffsetY = 20;

//脚

con.beginPath();

con.lineCap = 'round';

con.lineWidth = 50;

con.strokeStyle = 'white';

con.moveTo(150, 730);

con.lineTo(274, 730);

con.stroke();

con.closePath();

con.beginPath();

con.lineCap = 'round';

con.lineWidth = 50;

con.strokeStyle = 'white';

con.moveTo(324, 730);

con.lineTo(450, 730);

con.stroke();

con.closePath();

//去阴影

con.shadowBlur = 0;

con.shadowColor = 'white';

con.shadowOffsetX = 0;

con.shadowOffsetY = 0;

//渐变色

var linGradient = con.createLinearGradient(140, 475, 465, 475);

linGradient.addColorStop(0, 'rgb(182,50,11)');

linGradient.addColorStop(1, 'rgb(255,255,255)');

//项链

con.beginPath();

con.lineWidth = 40;

con.lineCap = 'round';

con.moveTo(150, 475);

con.lineTo(450, 475);

con.strokeStyle = linGradient;

con.stroke();

con.closePath();

//铃铛

con.beginPath();

con.lineWidth = 2;

con.arc(300, 510, 35, 0, Math.PI * 2, false);

con.strokeStyle = 'black';

con.stroke();

con.fillStyle = 'rgb(243,247,115)';

con.fill();

con.beginPath();

con.lineWidth = 1;

con.moveTo(276, 485);

con.lineTo(324, 485);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.lineWidth = 1;

con.moveTo(265, 500);

con.lineTo(334, 500);

con.strokeStyle = 'black';

con.stroke();

con.closePath();

con.beginPath();

con.fillStyle = 'black';

con.arc(300, 515, 10, 0, Math.PI * 2, false);

con.fill();

con.beginPath();

con.strokeStyle = 'black';

con.moveTo(300, 525);

con.lineTo(300, 545);

con.stroke();

con.closePath();

//口袋

con.beginPath();

con.strokeStyle = 'black';

con.arc(300, 565, 75, 0, Math.PI, false);

con.stroke();

con.closePath();

con.beginPath();

con.moveTo(225, 565);

con.lineTo(375, 565);

con.stroke();

con.closePath();

html5 多啦a梦,canvas实现哆啦A梦效果相关推荐

  1. PHP画a梦,使用canvas画“哆啦A梦”时钟的代码

    这篇文章主要介绍了JavaScript学习小结之使用canvas画"哆啦A梦"时钟的相关资料,需要的朋友可以参考下 前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的 ...

  2. 如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网

    html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...

  3. 前端小项目：使用canvas绘画哆啦A梦

    最近在学canvas元素,<canvas>标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来 要实现的效果图 在线预览 要想绘 ...

  4. Android用canvas画哆啦A梦

    先上图: 非常easy 第一步:找到一张哆啦A梦的照片 第二部:image.setBackgroundResource(R.drawable.XX); 哆啦A梦就出来了 是不是非常easy... 以上 ...

  5. 【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】

    目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...

  6. HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦

    最近在学canvas元素,标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来 要实现的效果图 要想绘画出这个哆啦a梦首先要掌握以下一些函数 ...

  7. canvas 画哆啦A梦头像

    正好最近学到了canvas,要做一个哆啦A梦,感觉做出来很可爱,想分享给大家,第一次写博客,有什么问题或者优化可以给我建议哦! 首先需要先建起画布 <canvas id="canvas ...

  8. python画图哆啦a梦-python 绘制哆啦A梦

    [实例简介] 绘制哆啦A梦 [实例截图] [核心代码] #!/usr/bin/python # -*- coding: UTF-8 -*- # 哆啦A梦 import turtle def flyTo ...

  9. 用python画多来a梦-python 绘制哆啦A梦

    [实例简介] 绘制哆啦A梦 [实例截图] [核心代码] #!/usr/bin/python # -*- coding: UTF-8 -*- # 哆啦A梦 import turtle def flyTo ...

最新文章

  1. 如何在NLP中有效利用Deep Transformer？
  2. NASA前掌门蛰伏10年 打造非冯·诺伊曼架构芯片
  3. python教程书籍推荐-推荐几本对于Python初学者比较好的书籍（内含PDF）
  4. Firefox扩展开发 Hello World！
  5. Mysql可视化工具Navicat中文版下载和报错解决
  6. MySQL - 索引优化案例实操
  7. android微信动画制作,动画制作轻量级SDK：PAG六大优势助力开发
  8. android中OpenMax的实现【2】AwesomePlayer中openmax的入口
  9. MySQL select
  10. 「本地搭建」worpress博客系统
  11. C语言学习：C语言编译流程
  12. NVIDIA GPU的架构代号
  13. Android项目中使用XUI框架的准备工作
  14. 2021字节秋招算法岗面经——抖音推荐
  15. linux网站如何添加swf支持,linux上查看swf文件.靠谱
  16. C7:如何使用JEPG Simulation进行ColorTuning？
  17. Windows Identity Foundation-- Windows身份验证基本框架
  18. 【每日面试】2021政采云Java一面
  19. yocto项目下载与编译
  20. 机器学习理论基础---1

热门文章

  1. 【程序员觉醒】提高效率，增加输出
  2. 【ORACLE】删除表空间，没有删除数据文件怎么办？解决办法
  3. PHP民俗文化管理系统,民俗文化网
  4. 安卓自定义电量显示图标
  5. 科尔沃擦窗机器人耗电_科沃斯扫地机器人耗电量大吗_科沃斯扫地机器人耗电情况...
  6. mysql建表语句主键
  7. 学校水卡、本地公交卡破解记
  8. C语言中如何引用子函数
  9. Rational Rose 2007 下载，安装及破解激活图文教程
  10. Android 10.0 修改搜狗为默认输入法，并且授予运行权限