画一个哆啦A梦

最新推荐文章于 2024-06-12 11:13:48 发布

Seven.hh

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量66

点赞数 1

分类专栏：炫酷前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73505782/article/details/132321818

版权

炫酷前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 效果图

2. 实现代码

2.1 html

        <!DOCTYPE html>
<html>
<head>
<title>哆啦A梦</title>
<meta charset="utf-8">
       <style>
           #canvas{
               margin: 20px 0 0 150px;
           }
       </style>
</head>
<body>
<canvas width="400px" height="600px" id="canvas" >
       </canvas>
</body>
</html>

2.2 js

window.onload = function(){
//圆圆的脑袋
var cxt = document.getElementById("canvas").getContext("2d");
cxt.beginPath();
cxt.lineWidth=1;
cxt.strokeStyle="black";
cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);
// createRadialGradient() 方法创建放射状/圆形渐变对象。


var head = cxt.createRadialGradient(260,25,8,200,175,175);
// addColorStop规定渐变对象中的颜色和停止位置。
// stop    介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
               // color    在 stop 位置显示的 CSS 颜色值。
head.addColorStop(0,"white")
head.addColorStop(1,"#16B3DC");
cxt.fillStyle=head;
cxt.fill();
cxt.stroke();
// 白白的脸蛋
cxt.beginPath();
cxt.fillStyle='white';
cxt.moveTo(110,110);
cxt.quadraticCurveTo(-10,200,120,315);
cxt.lineTo(280,315);
cxt.quadraticCurveTo(410,210,290,110);
cxt.lineTo(110,110);
cxt.stroke();
cxt.fill();
//大大的眼睛
cxt.beginPath();
cxt.lineWidth=1;
cxt.fillStyle='white';
cxt.moveTo(110,100);
cxt.bezierCurveTo(110,25,200,25,200,100);
cxt.bezierCurveTo(200,175,110,175,110,100);
cxt.moveTo(200,100);
cxt.bezierCurveTo(200,25,290,25,290,100);
cxt.bezierCurveTo(290,175,200,175,200,100);
cxt.fill();
       cxt.stroke();

//红红的鼻子
cxt.beginPath();
cxt.arc(200,165,25,0,2*Math.PI);
var radial = cxt.createRadialGradient(212,155,3,200,165,25);
radial.addColorStop(0,"white");
radial.addColorStop(1,"#D05823");
cxt.fillStyle=radial;
cxt.fill();
cxt.stroke();
//黑黑的眼珠
cxt.beginPath();
cxt.fillStyle="black";
doraemon(cxt,230,130);
cxt.fill();
cxt.stroke();

cxt.beginPath();
cxt.fillStyle="black";
doraemon(cxt,170,130);
cxt.fill();
cxt.stroke();

//长长的胡子
cxt.beginPath();
cxt.moveTo(80,175);
cxt.lineTo(150,195);
cxt.moveTo(80,200);
cxt.lineTo(150,205);
cxt.moveTo(80,225);
cxt.lineTo(150,215);
cxt.moveTo(200,195);
cxt.lineTo(200,290);

cxt.moveTo(250,195);cxt.lineTo(320,175);
cxt.moveTo(250,205);cxt.lineTo(320,200);
cxt.moveTo(250,215);cxt.lineTo(320,225);
cxt.moveTo(80,240);cxt.quadraticCurveTo(200,350,320,240);
cxt.stroke();cxt.beginPath();
cxt.moveTo(96,316);cxt.lineTo(305,316);

cxt.lineTo(320,316);cxt.arcTo(330,316,330,326,10);
cxt.lineTo(330,336);cxt.arcTo(330,346,305,346,10);
cxt.lineTo(81,346);cxt.arcTo(71,346,71,336,10);
cxt.lineTo(71,326);cxt.arcTo(71,316,81,316,10);
cxt.lineTo(96,316);
//美美的项链
var neck = cxt.createLinearGradient(96,316,305,316);
neck.addColorStop(0,"#B13209");
neck.addColorStop(1,"white");
cxt.fillStyle=neck;
cxt.fill();
cxt.stroke();


//短短的肉腿
cxt.beginPath();cxt.fillStyle="#0BB0DA";
cxt.moveTo(80,346);cxt.lineTo(26,406);
cxt.lineTo(65,440);cxt.lineTo(85,418);
cxt.lineTo(85,528);cxt.lineTo(185,528);
cxt.bezierCurveTo(185,505,215,505,215,528);
cxt.lineTo(315,528);cxt.lineTo(315,418);
cxt.lineTo(337,440);cxt.lineTo(374,406);
cxt.lineTo(320,346);cxt.fill();
cxt.stroke();
//胖胖的手掌
cxt.beginPath();cxt.fillStyle='white';
cxt.arc(32,438,32,0,2*Math.PI);cxt.fill();
cxt.stroke();
//胖胖的手掌
cxt.beginPath();cxt.fillStyle='white';
cxt.arc(368,438,32,0,2*Math.PI);
cxt.fill();cxt.stroke();
//可可爱爱肚兜
cxt.beginPath();
cxt.fillStyle="white";
cxt.arc(200,399,90,1.8*Math.PI,1.2*Math.PI);
cxt.fill();
cxt.stroke();

cxt.beginPath();
cxt.moveTo(130,399);
cxt.lineTo(270,399);
cxt.bezierCurveTo(270,489,130,489,130,399);
cxt.stroke();

//叮叮当当
cxt.beginPath();
cxt.arc(200,358,28,0,2*Math.PI);
var neck = cxt.createRadialGradient(220,340,0,200,358,30);
neck.addColorStop(0,"white");neck.addColorStop(1,"#F1EB55");
cxt.fillStyle=neck;cxt.fill();cxt.stroke();
cxt.beginPath();cxt.moveTo(178,340);
cxt.lineTo(222,340);cxt.moveTo(173,349);
cxt.lineTo(226,349);cxt.moveTo(200,367);
cxt.lineTo(200,387);cxt.stroke();
cxt.beginPath();cxt.fillStyle="black";
cxt.arc(200,363,8,0,2*Math.PI);cxt.fill();
cxt.stroke();
//白脚
cxt.beginPath();cxt.moveTo(85,528),
cxt.lineTo(75,528),cxt.bezierCurveTo(50,528,50,562,75,562);
cxt.lineTo(185,562);
cxt.bezierCurveTo(204,562,204,528,185,528);cxt.stroke();
cxt.beginPath();cxt.moveTo(215,528),
cxt.bezierCurveTo(196,528,196,562,215,562);
cxt.lineTo(325,562);cxt.bezierCurveTo(345,562,345,528,325,528);
cxt.lineTo(315,528);cxt.stroke();
}
//两眼珠的共同方法
function doraemon(cxt,x,y){
cxt.arc(x,y,12,0,2*Math.PI);
}