canvas画布用圆，直线画一只可爱的哆啦A梦大头

最新推荐文章于 2022-05-30 02:54:54 发布
最新推荐文章于 2022-05-30 02:54:54 发布
阅读量769 收藏 3
点赞数 9
文章标签： canvas css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43151592/article/details/103585285
版权

canvas画布用圆，直线画一只可爱的哆啦A梦大头

图片
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
			body{
				background: #ccc;
			}
            .box{
                width: 600px;
                height: 600px;
                margin: 0 auto;
				background: #fff;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <canvas id="canvas" width="600px" height="600px"></canvas>
        </div>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            /*画头*/
			
			ctx.beginPath();
			ctx.lineWidth = 4;
			ctx.strokeStyle = '#000';
			ctx.fillStyle = '#0bb0da';
			ctx.arc(300,175,175,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.stroke();
			ctx.closePath();
			//脸
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.fillStyle = '#fff';
			ctx.arc(300,250,120,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.stroke();
			ctx.clearRect(200,320,200,300);
			ctx.closePath();
			//眼睛
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.fillStyle = '#fff';
			ctx.arc(260,160,40,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.fillStyle = '#fff';
			ctx.arc(350,160,40,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.stroke();
			ctx.closePath();
            //眼珠
			ctx.beginPath();
			ctx.fillStyle = '#000';
			ctx.arc(270,180,10,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.closePath();
			
			ctx.beginPath();
			ctx.fillStyle = '#000';
			ctx.arc(340,180,10,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.closePath();
			//鼻子
			ctx.beginPath();
			ctx.fillStyle = '#d05823';
			ctx.arc(300,220,25,0,Math.PI/180*360);
			ctx.fill();//颜色填充
			ctx.closePath();
			//胡子
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(300,250);
			ctx.lineTo(300,300);
			ctx.stroke();
			ctx.closePath();
			//左边小胡子
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(270,260);
			ctx.lineTo(220,250);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(270,270);
			ctx.lineTo(220,275);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(270,280);
			ctx.lineTo(220,300);
			ctx.stroke();
			ctx.closePath();
			//右边小胡子
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(330,260);
			ctx.lineTo(380,250);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(330,270);
			ctx.lineTo(380,275);
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(330,280);
			ctx.lineTo(380,300);
			ctx.stroke();
			ctx.closePath();
			//嘴
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.moveTo(270,310);
			ctx.lineTo(330,310);
			ctx.stroke();
			ctx.closePath();
			//衣服下面
			ctx.beginPath();
			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000';
			ctx.fillStyle = '#d05823';
			ctx.fillRect(180,320,240,40);
			ctx.stroke();
			ctx.fill();
			ctx.closePath();
        </script>
    </body>
</html>
前端小菜菜
关注
  • 9
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas绘制哆啦A梦
shangc_的博客
09-28 308
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding:...
canvas 画哆啦A梦头像
lois_luis的博客
04-17 819
canvas绘制画布新手易学的可爱哆啦A梦
用canvas画了个多啦A梦
A081127的博客
04-24 458
学了点canvas就画了个多啦A梦，分享一下，一起进步 需要很大的耐心 封装了圆形，线形，折线形，矩形函数，直接套然后就是调数据用的时间长，画出来了就感觉很好 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met..
利用canvas画布画哆啦A梦
PILIpilipala的博客
08-27 773
<!DOCTYPE html> <html> <head> <title>哆啦A梦</title> <meta charset="utf-8"> </head> <body> <canvas width="400px" height="600px" id="canvas" ></canvas> <
利用纯canvas画一个哆啦A梦
rraxx的博客
12-18 668
搭建绘画环境 1. 设置两个Div，分别获取页面中的x,y坐标 html代码：<canvas id="cv_1" width="500" height="600"></canvas> <div id="div1"></div> <div id="div2"></div> css代码：div{ top: 500px; border: 1px solid red; width: 50px; heigh
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
01-09
本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先，我们需要在小程序的页面JSON配置文件中引入Canvas组件，并在对应的WXML文件中进行布局。例如： ```json { "component...
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
10-21
标题中提到的“JavaScript学习小结之使用canvas画‘哆啦A梦’时钟”，显示了如何用JavaScript和HTML5的canvas元素来绘制一个时钟界面。这涉及到JavaScript基础知识、HTML5 canvas元素的使用、绘图API的调用、图像的...
html5 canvas画布绘制圆形时钟代码
09-08
在上面的代码中，我们创建了一个宽高均为300像素的canvas元素，并引用了一个名为`clock.js`的JavaScript文件，该文件将包含实现时钟绘制的逻辑。 接下来，我们需要在`clock.js`中编写JavaScript代码。这里，我们将...
QML--Canvas画布实现矩形圆形等圈定
01-10
在QML中，Canvas是一个强大的组件，用于在用户界面上进行低级的图形绘制。它提供了JavaScript API，允许开发者直接在2D画布上绘制图形，包括但不限于矩形、圆形以及其他几何形状。QML（Qt Meta Language）是Qt框架的...
微信小程序canvas画布实现画笔自由绘制
最新发布
01-09
在微信小程序中，canvas画布是一个非常重要的组件，它允许开发者进行丰富的图形操作，包括自由绘制功能。这个功能常用于创建涂鸦应用、手写笔记、图像编辑等场景。本篇将详细介绍如何利用微信小程序的canvas API来...
HTML5 canvas哆啦A梦机器猫图形代码.zip
07-04
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
用canvas画出可爱的哆啦A梦
FleshyAPP的博客
05-11 987
用canvas画出可爱的哆啦A梦 提示：这里可以添加本文要记录的大概内容： 例如：本文就介绍了canvas案例的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、canvas是什么？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二、使用步骤 1.哆啦A梦基本代码 代码如下（示例）： <!DOCTYPE html> <html l
教你如何用Canvas绘制整身的哆啦A梦
qq_39155611的博客
06-14 813
教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆啦A梦，想了想，决定安排一下。如图： HTML代码： <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas> CSS代码： * { margin: 0;
【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
LPC的博客
05-30 526
目录canvas1. canvas是H５新增标签2.使用canvas画出矩形(1)第一步,要新建画布(2)第二步,要创建一支画笔(3)第三步,用canvas画出矩形3. 如何使用canvas画出哆啦A梦(1)canvas画路径(2)使用canvas画直线(3)使用canvas画出圆和半圆(5) 进行上色和描边(6)画出哆啦A梦案例 canvas 1. canvas是H５新增标签 canvas是H５新增标签，也可称之为canvas对象,像所有的dom对象一样，它也有自己本身的属性、方法和事件，其中就有绘图.
Canvas绘制幽灵小可爱
FirstMark
08-04 131
Canvas绘制幽灵小可爱 HTML部分 <canvas id="canvas" width="400" height="500" style="background-color: #000000;"></canvas> JS部分 let canvas = document.getElementById('canvas'); let cxt = canvas.getContext('2d'); //设定当前整体幽灵对象的Y轴位置初始值 let obj
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
weixin_35453718的博客
03-10 227
这篇文章主要介绍了JavaScript学习小结之使用canvas画“哆啦A梦”时钟的相关资料,需要的朋友可以参考下前言：今天看完了Js书的canvas画布那张，好开心~又是心爱的canvas~欧耶~之前看到有人建议我画蓝胖子，对哦，我怎么把童年最喜欢的蓝胖子忘了，为了表达我对蓝胖子的歉意，所以今天画了会动的hello world，也算是一种进步咯~好的各位，请上车的乘客往里走，请不要堵塞通道，谢谢...
canvas的实例--每个人都想拥有的哆啦A梦
哈喽234的博客
04-01 787
学习canvas时画的一个哆啦A梦，还有不足，以后改进
canvas之可爱的时钟
weixin_44389107的博客
03-10 114
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas
unity3d游戏开发简单画线
u013951435的专栏
07-09 2796
unity3d游戏开发简单画线  代码如下
使用canvas画一个完整的哆啦a梦
05-28
但是，我可以给你一些基本的步骤和代码示例，以帮助你使用canvas画一个完整的哆啦A梦。 首先，你需要创建一个canvas元素，并设置它的宽度和高度。然后，你可以使用JavaScript中的Canvas API来绘制哆啦A梦的各个部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值