canvas哆啦A梦
纯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>