canvas哆啦A梦

最新推荐文章于 2023-05-23 09:38:57 发布
最新推荐文章于 2023-05-23 09:38:57 发布
阅读量612 收藏 1
点赞数
分类专栏： h5移动端开发 文章标签： canvas蓝胖子 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DYShiningLife/article/details/52821204
版权

纯canvas画法       



<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#myCanvas{

box-shadow: 0 0 10px red;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="800" height="800"></canvas>

<script type="text/javascript">

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

function EllipseOne(context, x, y, a, b,pi,begin) {//椭圆函数

var step = (a > b) ? 1 / a : 1 / b;

context.beginPath();

context.moveTo(x + a, y);

for(var i = begin; i < pi; i += step) {

context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));

}

context.stroke();

}

// EllipseOne(ctx, 100, 100, 100, 50);

//头

//蓝头

ctx.beginPath();

ctx.fillStyle = "#00B9DB";

ctx.arc(400,225,210,3*Math.PI/8,Math.PI/8*5,true);

ctx.stroke();

ctx.fill();

//白脸

EllipseOne(ctx, 400, 270, 180, 130,Math.PI*2,0);

ctx.fillStyle = "white";

ctx.fill();

//眼睛左

EllipseOne(ctx, 350, 150, 50, 65,Math.PI*2,0);

ctx.fillStyle = "white";

ctx.fill();

  //眼球左

    ctx.beginPath();

ctx.arc(365,180,15,0,Math.PI*2,true);

ctx.stroke();

ctx.fillStyle = "black";

ctx.fill();

//眼睛右

EllipseOne(ctx, 450, 150, 50, 65,Math.PI*2,0);

ctx.fillStyle = "white";

ctx.fill();

  //眼球右

    ctx.beginPath();

ctx.arc(435,180,15,0,Math.PI*2,true);

ctx.stroke();

ctx.fillStyle = "black";

ctx.fill();

//胡子

//右胡子

ctx.beginPath();

ctx.moveTo(400,270);

           ctx.arc(400,275,140,5*Math.PI/180,5*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(400,270);

           ctx.arc(400,250,140,5*Math.PI/180,5*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(400,270);

           ctx.arc(400,225,140,5*Math.PI/180,5*Math.PI/180,false);

ctx.stroke();

//左胡子

ctx.beginPath();

ctx.moveTo(400,270);

           ctx.arc(400,275,140,175*Math.PI/180,175*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(400,270);

           ctx.arc(400,250,140,175*Math.PI/180,175*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(400,270);

           ctx.arc(400,225,140,175*Math.PI/180,175*Math.PI/180,false);

ctx.stroke();

//鼻子

  //底

  ctx.beginPath();

  ctx.fillStyle = "white";

  ctx.fillRect(350,220,100,100);

  ctx.strokeStyle ="black";

  //鼻头

    ctx.beginPath();

ctx.arc(400,220,25,0,Math.PI*2,true);

ctx.stroke();

ctx.fillStyle = "#FF0000";

ctx.fill();

//鼻子->嘴线

ctx.beginPath();

ctx.moveTo(400,250);

    ctx.arc(400,250,95,2*Math.PI/4,2*Math.PI/4,false);

    ctx.stroke();

//     zui

ctx.strokeStyle ="black";

EllipseOne(ctx, 400, 300, 140, 60,Math.PI,0);

//           

//     ctx.beginPath();

//     ctx.arc(400,155,190,2.2*Math.PI/8,5.8*Math.PI/8,false);

//     ctx.stroke();

         //身子(lan)

ctx.beginPath();

ctx.strokeStyle = "black";

ctx.strokeRect(259,399,282,242);

ctx.fillStyle = "#00B9DB";

ctx.fillRect(260,400,280,240);

//肚子

ctx.beginPath();

ctx.arc(400,480,105,7*Math.PI/4,5*Math.PI/4,false);

ctx.stroke();

ctx.fillStyle = "white";

ctx.fill();

//兜

ctx.beginPath();

ctx.lineWidth = 1.5;

ctx.arc(400,480,80,0,Math.PI,false);

ctx.closePath();

ctx.stroke();

ctx.fillStyle = "white";

ctx.fill();

//领带

//方

  ctx.beginPath();

    var lineG = ctx.createLinearGradient(0,0,500,500);

lineG.addColorStop(0,"#AA1919");

lineG.addColorStop(0.3,"#AA1919");

lineG.addColorStop(0.5,"#AA1919");

lineG.addColorStop(0.7,"#AA1919");

lineG.addColorStop(0.8,"#AA1919");

lineG.addColorStop(0.9,"white");

lineG.addColorStop(1.0,"white");

ctx.fillStyle = lineG;

  ctx.fillRect(245,375,310,30);

  ctx.beginPath();

  ctx.moveTo(245,374);

      ctx.lineTo(555,374);

      ctx.stroke();

  //downline

  ctx.beginPath();

  ctx.moveTo(245,406);

      ctx.lineTo(555,406);

      ctx.stroke();

 

  //左半圆

    ctx.beginPath();

   

ctx.arc(245,390,15.5,3*Math.PI/2,Math.PI/2,true);

ctx.stroke();

ctx.fillStyle = "#AA1919";

ctx.fill();

//右半圆

    ctx.beginPath();

ctx.arc(555,390,15.5,3*Math.PI/2,Math.PI/2,false);

ctx.stroke();

ctx.fillStyle = "white";

ctx.fill();

//铃铛

ctx.beginPath();

ctx.arc(400, 415, 30, 0 , Math.PI*2, false);

ctx.stroke();

ctx.fillStyle = "yellow";

ctx.fill();

ctx.beginPath();

ctx.arc(400, 425, 7, 0 , Math.PI*2, false);

ctx.stroke();

ctx.fillStyle = "black";

ctx.fill();

ctx.beginPath();

ctx.moveTo(400,425);

ctx.arc(400, 425, 20, 90 * Math.PI / 180, 90 * Math.PI / 180, false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(430,407);

ctx.arc(430, 407, 60,  Math.PI,  Math.PI , false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(424,397);

ctx.arc(424, 397, 48,  Math.PI,  Math.PI , false);

ctx.stroke();

//左胳臂

      ctx.beginPath();

  ctx.moveTo(260,406);

      ctx.lineTo(180,500);

      ctx.lineTo(225,550);

      ctx.lineTo(260,510);

      ctx.closePath();

      ctx.stroke();

      ctx.fillStyle = "#00B9DB";

  ctx.fill();

  //覆盖边(覆盖身体和胳膊之间的边线)

  ctx.beginPath();

  ctx.lineWidth = 2;

  ctx.strokeStyle = "#00B9DB";

  ctx.moveTo(261,407);

      ctx.lineTo(261,510);

      ctx.stroke();

               //左手

               ctx.beginPath();

  ctx.strokeStyle = "black";

               ctx.arc(200,525,40,0,Math.PI*2,false);

               ctx.stroke();

               ctx.fillStyle = "white";

  ctx.fill();

//右胳臂/****************/

      ctx.beginPath();

  ctx.moveTo(540,406);

      ctx.lineTo(620,500);

      ctx.lineTo(575,550);

      ctx.lineTo(540,510);

      ctx.closePath();

      ctx.stroke();

      ctx.fillStyle = "#00B9DB";

  ctx.fill();

  //覆盖边

  ctx.beginPath();

  ctx.lineWidth = 2;

  ctx.strokeStyle = "#00B9DB";

  ctx.moveTo(540,407);

      ctx.lineTo(540,510);

      ctx.stroke();

               //右手

               ctx.beginPath();

  ctx.strokeStyle = "black";

               ctx.arc(600,525,40,0,Math.PI*2,false);

               ctx.stroke();

               ctx.fillStyle = "white";

  ctx.fill();

   

  腿缝

  ctx.lineWidth = 1;

ctx.beginPath();

ctx.arc(401,644,20,Math.PI,0,false);

ctx.fillStyle = "white";

ctx.fill();

ctx.stroke();

//脚

ctx.beginPath();

ctx.strokeStyle = "black";

ctx.strokeRect(245,640,140,35);

ctx.beginPath();

ctx.fillStyle = "white";

ctx.fillRect(244,641,142,33);

ctx.beginPath();

ctx.arc(245,657,17.5,90*Math.PI/180,270*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(385,657,17.5,270*Math.PI/180,90*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.strokeStyle = "black";

ctx.strokeRect(420,640,135,35);

ctx.beginPath();

ctx.fillStyle = "white";

ctx.fillRect(419,641,137,33);

ctx.beginPath();

ctx.arc(420,657,17.5,90*Math.PI/180,270*Math.PI/180,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(555,657,17.5,270*Math.PI/180,90*Math.PI/180,false);

ctx.stroke();

</script>

</body>


</html>

h5女汉纸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
教你如何用Canvas绘制整身的哆啦A梦
qq_39155611的博客
06-14 798
教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图： HTML代码： <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas> CSS代码： * { margin: 0;
canvas绘制哆啦A梦
shangc_的博客
09-28 303
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding:...
[HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
我的Github
04-17 4822
网上有人用css3实现哆啦A梦,我给他多加了个竹蜻蜓的动画，点击观看演示，兼容性并不好，只有webkit支持动画，ie下就是一堆方块。所以我想用svg技术来实现所有浏览器的兼容。 先来看下演示，目前知道的是ie6，7不支持动画，但是绘图还是没有问题的，ie6,7点击观看演示 最近对svg有些研究，先是使用svg代替css3实现qq空间关闭按钮旋转特效，然后是使用svg代替css3绘制oper
canvas综合应用绘制哆啦A梦
小圣贤君的博客
11-16 4319
HTML5中canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.通过这一元素，我们可以在画布上画出各种图形，线条，矩形，圆形，椭圆，字体，渐变等，当然可以自己设计组合绘制自己想要的图案，今天，笔者通过canvas绘制了一个哆啦A梦的图案，其中，应用了颜色渐变，贝塞尔曲线等知识点，是对canvas的一个较综合的应用。请看效果图： 通过canvas画图需要确定各个点，比
使用canvas绘制哆啦A梦
最新发布
weixin_46936691的博客
05-23 181
canvas绘制
教你如何利用canvas画布绘制哆啦A梦
qq_39155611的博客
06-12 3320
教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图： HTML代码： <canvas id="my_canvas"></canvas> CSS代码： canvas { display:block; margin:0 auto; background: pink } JavaScript代码：
canvas 画哆啦A梦头像
lois_luis的博客
04-17 772
canvas绘制画布新手易学的可爱哆啦A梦
HTML5 canvas哆啦A梦机器猫图形特效代码
03-20
综上所述，"HTML5 canvas哆啦A梦机器猫图形特效代码"是一个结合了HTML5 canvas基础绘图、动画制作、交互设计等多个方面的实例，对于学习canvas技术和提升Web前端开发技能非常有帮助。通过研究这个项目，开发者可以...
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
总之，“HTML5 canvas哆啦A梦机器猫图形代码”是一个很好的学习资源，它将理论与实践相结合，帮助开发者熟练掌握HTML5 canvas的图形绘制技巧，并激发更多的创新应用。通过深入研究和实践，开发者可以不断提升自己的...
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
10-21
主要介绍了JavaScript学习小结之使用canvas画“哆啦A梦”时钟的相关资料,需要的朋友可以参考下
OpenGL_哆啦A梦环游世界
05-31
OpenGL 计算机图形学 天空盒 哆啦A梦环游世界
哆啦A梦简单小白练习作品
12-07
主要内容是利用HTML进行区域划分加上CSS普通以及高级部分的知识进行美化以及实现动画，本作品图片是网上素材，根据图片的格式进行网页划分后实现的，属于原创作品，供大家学习使用，但不能用作商业用途，代码没有精简，但通俗易懂，本人也是小白，这只是个人练习作品，供参考
哆啦A梦.zip
06-25
免费的安卓测试功能：代理设置、应用管理、设备信息、内存填充、文件生成、性能监控、添加测试联系人、卸载所有app、ANR获取、时间调整、一键搬家、文件监控、简易文件管理、模拟广播、设置host、帧率获取、卸载被测app、启动ftp服务、抓包工具、获取系统日志文件等功能
源码用python的tkinter模块的Canvas画哆啦a梦
04-11
用python的tkinter模块的Canvas画哆啦a梦，内含源码、详细注释
canvas--多啦a梦.html
04-30
据大家熟知的一样，canvas在画图方面有很强大的应用，比如一些流程操作，图表等都可以使用canvas来开发，这是一个自己使用canvas来实现小时候希望自己拥有的一个哆啦A梦，小蓝胖子在这里哦！
html5 canvas绘制哆啦A梦机器猫图形效果源码.zip
11-03
在这个项目中，开发者可能利用了Canvas的`drawImage()`方法来加载哆啦A梦的图片，然后通过`getImageData()`和`putImageData()`方法对图像数据进行处理，实现特定的图形效果。此外，可能还涉及到动画制作，比如使用`...
opengl绘制卡通人物哆啦A梦
学点什么好呢
10-23 4130
前段时间老师布置一作业，我画了一个哆啦A梦，代码如下 #include <Windows.h> #include <gl\glut.h> #include <stdio.h> #include<math.h> #define GLUT_DISABLE_ATEXIT_HACK #define N 100 const GLfloat temp...
canvas的实例--每个人都想拥有的哆啦A梦
哈喽234的博客
04-01 783
学习canvas时画的一个哆啦A梦，还有不足，以后改进
canvas画布画卡通人物--哆啦A梦
html5_css3_js的博客
11-24 5113
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #canv
使用canvas画哆啦A梦
05-20
好的，以下是一个简单的使用canvas画哆啦A梦的示例代码： ``` // 获取canvas元素 const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // 设置画笔颜色 ctx.fillStyle = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值