canvas综合应用绘制哆啦A梦

最新推荐文章于 2024-06-18 15:58:40 发布
最新推荐文章于 2024-06-18 15:58:40 发布
阅读量4.3k 收藏 15
点赞数 4
分类专栏： canvas 文章标签： canvas 哆啦A梦 贝塞尔曲线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/53183341
版权

HTML5中canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.通过这一元素，我们可以在画布上画出各种图形，线条，矩形，圆形，椭圆，字体，渐变等，当然可以自己设计组合绘制自己想要的图案，今天，笔者通过canvas绘制了一个哆啦A梦的图案，其中，应用了颜色渐变，贝塞尔曲线等知识点，是对canvas的一个较综合的应用。请看效果图：
这里写图片描述
通过canvas画图需要确定各个点，比较繁琐，读者需要有耐心。请看代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 600px;
                height: 800px;
                border: 1px solid black;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <canvas id="canvas" width="600px" height="800px"></canvas>
        </div>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            ctx.lineWidth = 4;
            /*画椭圆*/
            function ellipse(context, x, y, a, b) {
                context.save();
                var r = (a > b) ? a : b;
                var ratioX = a / r;
                var ratioY = b / r;
                context.scale(ratioX, ratioY);
                context.beginPath();
                context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
                context.closePath();
                context.restore();
                context.fillStyle = "black";
                if(a<=10){
                    context.fillStyle = "white";
                }
                context.fill();

            }

            //头部外圈
            ctx.beginPath();
            ctx.arc(300,200,200,0.25*Math.PI,0.75*Math.PI,true);
            ctx.quadraticCurveTo(306, 403, 444, 340);
            var color = ctx.createRadialGradient(140,50,20,120,30,200);
            color.addColorStop(0.0,"white");
            color.addColorStop(1.0,"#019FE8");
            ctx.fillStyle = color;
            ctx.fill();
            ctx .stroke();
            ctx.closePath();
            //头部内圈
            ctx.beginPath();
            ctx.arc(300,230,175,0.25*Math.PI,0.75*Math.PI,true);
            ctx.quadraticCurveTo(306, 403, 424, 350);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            //左眼睛
            ctx.beginPath();
            ctx.moveTo(300, 50);
            ctx.arc(260,50,40,0,2*Math.PI);
            ctx.moveTo(256, 60);
            ctx.quadraticCurveTo(273, 25, 286, 60);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            //右眼睛
            ctx.beginPath();
            ctx.moveTo(380, 50);
            ctx.arc(340,50,40,0,2*Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            //椭圆眼珠子
            ellipse(ctx, 326, 50, 14, 20);
            ellipse(ctx, 322, 46, 5, 7);
            //鼻子
            ctx.beginPath();
            ctx.moveTo(300, 125);
            ctx.arc(300,100,25,0.5*Math.PI,2.5*Math.PI);
            ctx.fillStyle = "#E70012";
            ctx.fill();
            ctx.lineTo(300,200);
            ctx.stroke();
            ctx.closePath();
            ellipse(ctx, 306, 96, 9, 9);
            //胡须
            ctx.beginPath();
            ctx.moveTo(260,125);
            ctx.lineTo(180,100);
            ctx.moveTo(260,150);
            ctx.lineTo(160,150);
            ctx.moveTo(260,175);
            ctx.lineTo(170,200);
            ctx.moveTo(340,125);
            ctx.lineTo(420,100);
            ctx.moveTo(340,150);
            ctx.lineTo(440,150);
            ctx.moveTo(340,175);
            ctx.lineTo(430,200);
            ctx.moveTo(173, 125);
            ctx.bezierCurveTo(96, 95, 88, 238, 200, 218);
            ctx.moveTo(422, 119);
            ctx.bezierCurveTo(501, 84, 517, 217, 402, 215);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            //嘴巴
            ctx.beginPath();
            ctx.moveTo(164, 218);
            ctx.quadraticCurveTo(298, 453, 434, 214);
            ctx.bezierCurveTo(414,218,340,192,300,200);
            ctx.bezierCurveTo(260,192,186,218,164, 218);
            ctx.fillStyle = "#E70012";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            //舌头
            ctx.beginPath();
            ctx.moveTo(233, 308);
            ctx.bezierCurveTo(230, 271, 283, 268, 300, 284);
            ctx.bezierCurveTo(319, 271, 371, 264, 359, 310);
            ctx.quadraticCurveTo(298, 360, 233, 308);
            ctx.fillStyle = "#EC6D1E";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            //左手
            ctx.beginPath();
            ctx.moveTo(100,400);
            ctx.arc(80,440,45,0,2*Math.PI);
            ctx.stroke();
            ctx.closePath();

            //身子
            ctx.beginPath();
            ctx.moveTo(150, 360);
            ctx.lineTo(100,400);
            ctx.quadraticCurveTo(90, 430, 120, 440);
            ctx.lineTo(150,430);
            ctx.lineTo(154,386);
            ctx.quadraticCurveTo(140, 500, 150, 560);
            ctx.quadraticCurveTo(136,580,140,600);
            ctx.quadraticCurveTo(200,610,270,600);
            ctx.arc(300,600,30,1*Math.PI,2*Math.PI);
            ctx.quadraticCurveTo(390,610,460,600);
            ctx.quadraticCurveTo(466,580,450,560);
            ctx.quadraticCurveTo(460,500,450,386);
            ctx.moveTo(452,420);
            ctx.lineTo(560,280);
            ctx.lineTo(520,250);
            ctx.lineTo(480,286);
            ctx.quadraticCurveTo(400,450,150, 360);
            ctx.fillStyle = "#019fe8";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            //肚兜
            ctx.beginPath();
            ctx.moveTo(200,440);
            ctx.bezierCurveTo(170,580,440,570,400,440);
            ctx.bezierCurveTo(390,360,210,360,200,440);
            ctx.moveTo(220,460);
            ctx.bezierCurveTo(210,550,400,540,380,460);
            ctx.quadraticCurveTo(300,470,220,460);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            //脖子
            ctx.beginPath();
            ctx.moveTo(444, 340);
            ctx.quadraticCurveTo(306, 403, 156, 340);
            ctx.quadraticCurveTo(146, 340, 150, 360);
            ctx.quadraticCurveTo(306, 423, 450, 360);
            ctx.quadraticCurveTo(454, 340, 444, 340);
            ctx.fillStyle = "#E30115";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            //铃铛
            ctx.beginPath();
            ctx.moveTo(334, 410);
            ctx.arc(300,410,34,0,2*Math.PI);
            ctx.strokeStyle = "black";
            ctx.fillStyle = "#FFD000";
            ctx.moveTo(265, 404);
            ctx.quadraticCurveTo(289, 395, 336, 404);
            ctx.moveTo(265, 412);
            ctx.quadraticCurveTo(289, 403, 336, 412);
            ctx.moveTo(300,444);
            ctx.lineTo(300,424);
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.moveTo(305, 420);
            ctx.arc(300,420,5,0,2*Math.PI);
            ctx.strokeStyle = "black";
            ctx.fillStyle = "gray";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            //右手
            ctx.beginPath();
            ctx.moveTo(595,250);
            ctx.arc(550,250,45,0,2*Math.PI);
            ctx.fillStyle = "white";
            ctx.fill();
            ctx.stroke();
            ctx.closePath();

            //左脚
            ctx.beginPath();
            ctx.moveTo(140,600);
            ctx.quadraticCurveTo(100,610,100,640);
            ctx.bezierCurveTo(100,700,300,680,290,640);
            ctx.quadraticCurveTo(290,610,270,600);
            ctx.stroke();
            ctx.closePath();
            //右脚
            ctx.beginPath();
            ctx.moveTo(330,600);
            ctx.quadraticCurveTo(310,610,310,640);
            ctx.bezierCurveTo(320,700,510,680,500,640);
            ctx.quadraticCurveTo(500,610,460,600);
            ctx.stroke();
            ctx.closePath();

            //字体
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.font = "bold 40px 楷体";
            var fontColor = ctx.createLinearGradient(250,455,280,545);
            fontColor.addColorStop(0.0,"yellow");
            fontColor.addColorStop(1.0,"red");
            ctx.fillStyle = fontColor;
            ctx.fillText("梦",280,505,50);
            ctx.closePath();
        </script>
    </body>
</html>

读者需要注意，通过canvas画图，填充颜色的时候后面的颜色会覆盖住前面的颜色，最简单的解决方法就是调整一下前后位置就可以。读者可以自行运行，查看效果。

小圣贤君
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 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梦头像
lois_luis的博客
04-17 772
canvas绘制画布新手易学的可爱哆啦A梦
教你如何利用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代码：
MFC绘制哆啦A梦
最新发布
程序区
06-18 715
【代码】MFC绘制哆啦A梦。
H5 canvas画布总结 （绘制哆啦A梦）
isfor_you的博客
12-14 786
canvas标签 只是图形容器定义图形，使用 canvas 绘制路径,盒、圆、字符以及添加图像 1.创建一个画布 2.绘制图形(javastript) var cv_1 = document.getElementById("cv"); var can = cv_1.getContext('2d'); 解析： 首先，找到canvas元素： var cv_1 = document.getElementById(“cv”); 然后，创建context对象： var can = cv_1.getContext
HTML5利用canvas画布绘制哆啦A梦
明哥
03-16 911
效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蓝胖子</title> <style> canvas { display:block; margin:0 auto; } </style
如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部（代码实例）
weixin_39634480的博客
06-25 468
html5的canvas是很强大的，下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。效果如下：代码如下：您的浏览器不支持canvasvar face = document.getElementById('face').getContext("2d");face.arc(252,252,250,0,360*Math...
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
weixin_30294759的博客
07-01 1674
最近在学canvas元素,标签只是图形容器，必须使用js来绘制图形。为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数：开始绘画！！首先我们需要创建一个400*600的画布，代码如下:复制代码接着定义一个div，用来显示坐标复制代码接着我写了一个显示坐标的函数，可以用来看大概画到哪个点：function zuobiao(...
多来a梦html代码,html5 canvas绘制哆啦A梦机器猫图形代码
weixin_42499159的博客
06-09 994
特效描述：html5 canvas绘制 哆啦A梦 机器猫图形代码。html5 canvas利用画布绘制哆啦A梦代码结构1. HTML代码window.onload=function(){var cxt=document.getElementById('canvas').getContext('2d');cxt.beginPath();cxt.lineWidth=1;cxt.strokeStyle=...
python海龟画哆啦a梦_python学习——thinter-canvas绘制哆啦A梦
weixin_39611340的博客
12-04 437
学习python的小伙伴大概都做过绘制哆啦A梦的作业吧，今天就让小风帮大家理理思路吧~ 首先让我们来看一张成果图：哈哈哈，菜鸟成果图要绘制这张图我们只需要用到tkinter中的canvas函数：arc = canvas.create_arc(coord, start=0, extent=150, fill="blue") #扇形line = canvas.create_line(x0, y0, x...
html5 canvas绘制哆啦A梦机器猫图形效果源码.zip
11-03
在这个“html5 canvas绘制哆啦A梦机器猫图形效果源码.zip”压缩包中，包含的是一份使用Canvas API来实现哆啦A梦机器猫图形绘制的示例代码。 Canvas API是HTML5引入的一个核心特性，它提供了一个基于矢量图形的画布...
HTML5 canvas哆啦A梦机器猫图形特效代码
03-20
综上所述，"HTML5 canvas哆啦A梦机器猫图形特效代码"是一个结合了HTML5 canvas基础绘图、动画制作、交互设计等多个方面的实例，对于学习canvas技术和提升Web前端开发技能非常有帮助。通过研究这个项目，开发者可以...
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
这个“HTML5 canvas哆啦A梦机器猫图形代码”示例，展示了如何利用canvas API来绘制哆啦A梦这一经典卡通形象。 1. **HTML5 Canvas基本概念** - HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程，...
源码用python的tkinter模块的Canvas画哆啦a梦
04-11
本教程将详细讲解如何利用`tkinter`的`Canvas`组件来绘制哆啦A梦的形象，让你亲身体验Python绘图的魅力。 首先，`Canvas`是`tkinter`中的一个主要组件，它允许我们在窗口上绘制各种图形，如线条、矩形、圆形、文本...
H5炫酷特效系列1——canvas满屏幕变换爱心示例
热门推荐
小圣贤君的博客
07-29 1万+
啥都不说，先上效果图，同志们觉得满意就继续看，不中意直接过。 效果为满屏幕的红心到处乱窜，红心自动变换大小和透明度，代码也不多，同志们直接复制就可以运行查看。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>满屏幕红心</title> <style type="text/css"> b
H5炫酷特效系列4——炫酷粒子变化特效
小圣贤君的博客
07-30 9371
这个示例虽然没有相对比较实用的特性，但是表现出来的效果确实非常震撼眼球。先上效果图，让各位同胞感受一下： 特效的表现感很强，有兴趣的读者可以仔细学习一下下面的代码，尝试着理解其中的逻辑。<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>炫酷粒子变换特效</title> <style type="text
H5炫酷特效系列2——canvas特效-炫酷的心
小圣贤君的博客
07-29 7171
之前已经有了一个满屏幕红心的案例，这次带来一个更加炫酷的心型炫酷动效，直接上图，有兴趣的就继续往下看，没兴趣直接过。 屏幕上眼花缭乱的心，不停的冲击着你的视线，让那些少女心砰砰直跳，绝对表白利器，同志们可以直接拿去给中意的姑娘看哦。 直接将下面的代码复制运行就可以看到效果：<!DOCTYPE html> <html><head> <meta charset="utf-8"> <tit
canvas绘制精细走动时钟
小圣贤君的博客
11-16 5325
这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图： 颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
html5 多啦a梦,HTML5利用canvas绘制哆啦A梦头部（代码实例）
06-09
好的，下面是利用 canvas 绘制哆啦A梦头部的 HTML5 代码实例： ```html <!DOCTYPE html> 哆啦A梦头部绘制 <canvas id="myCanvas" width="400" height="400"></canvas> var canvas = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值