学了点canvas就画了个多啦A梦，分享一下，一起进步
希望我们都能像小叮当一样天天开心，想要写的东西像小叮当在口袋里拿出宝贝一样轻轻松松
封装了圆形，线形，折线形，矩形函数，直接套然后就是调数据用的时间长，画出来了就感觉很好
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas</title></head><body><canvas id="imocd">你的浏览器不支持canvas，请升级你的浏览器</canvas><script>let canvas=document.getElementById('imocd');canvas.width=800canvas.height=800let ctx=canvas.getContext('2d');face(225,225,100,"blue")//脸外层face(225,240,80,"#fff")//脸内层eye(200,160,25,210,8,'#000','#fff')//左眼eye(250,160,25,240,8,'#000','#fff')//右眼eye(225,185,10,222,3,'#fff','#fe0069')//鼻子pi(155,225,25,0.4,1.7,'#fff')pi(290,226,25,1.4,0.65,'#fff')lines(225,194,225,249)lines(240,205,285,195)//右三横lines(245,215,295,215)lines(240,225,295,235)lines(205,215,155,215)//左三横lines(210,205,165,195)lines(210,225,160,235)pi(221,228,66,0.1,0.9,'#fe0069')//嘴pi(221,295,25,1.06,1.94,'#fe8400')//嘴pi(221,227.65,66,0.38,0.62,'#fe8400')//嘴rects(150,320,150,160,"blue")//身体pi(225,488,20,1.1,1.9,'#fff')rects(150,480,55,20,'#fff')//左脚pi(150,490,10,0.4,1.6,"#fff")pi(205,490,10,1.4,0.6,"#fff")rects(245,480,55,20,'#fff')//右脚pi(243,490,10,0.4,1.6,"#fff")pi(299,490,10,1.4,0.6,"#fff")linez(141,281,180,320,150,330)//为了隐藏不必要的颜色lines(150,330,180,320,'blue')pi(221,380,66,0,2,'#fff')//口袋pi(221,390,50,0,1,'#fff')//口袋lines(170,390,271,390)linez(286,302,500,485,287,350)linez(340,300,500,485,310,400,'#fff','#fff')pi(330,355,25,0,2,'#fff')//右手rects(165,305,120,15,'#fe0069')//钉铛绳pi(166,312,8,0.5,1.5,'#fe0069')//钉铛绳pi(284,312,8,1.5,0.5,'#fe0069')//钉铛绳eye(221,340,25,220,8,'#e9c44e','#f1f900')//钉铛rects(200,325,44,8.5,'#f1f900')//钉铛pi(201,329,5,0.5,1.5,'#f1f900')//钉铛pi(243,329,5,1.5,0.5,'#f1f900')//钉铛lines(221,347,221,365)linez(142,280,-30,165,150,330)linez(100,200,-30,165,88,275,'#fff','#fff')pi(80,250,25,0,2,'#fff')//左手//眼，鼻子函数function eye(w,h,r,e,r1,clo1,clo2){ctx.beginPath()ctx.arc(w,h,r,0,2*Math.PI)ctx.strokeStyle='#000'ctx.fillStyle=clo2ctx.fill()ctx.stroke()//眼球ctx.beginPath()ctx.arc(e,h,r1,0,2*Math.PI)ctx.fillStyle=clo1ctx.fill();}//脸函数function face(w,h,r,clo){ctx.beginPath()ctx.arc(w,h,r,0.7*Math.PI,0.3*Math.PI)ctx.strokeStyle='#000'ctx.fillStyle=cloctx.fill()ctx.stroke()}//半圆函数function pi(w,h,r,s,e,clo){ctx.beginPath()ctx.arc(w,h,r,s*Math.PI,e*Math.PI)ctx.strokeStyle='#000'ctx.fillStyle=cloctx.fill()ctx.stroke()}//线性函数function lines(w,h,ew,eh,col='#000'){ctx.beginPath()ctx.moveTo(w,h)ctx.lineTo(ew,eh)ctx.lineWidth=1.2ctx.strokeStyle=colctx.stroke()}//折线函数function linez(w,h,ew,eh,zw,zh,col='blue',col1='#000'){ctx.beginPath()ctx.moveTo(w,h)ctx.lineTo(ew,eh)ctx.lineTo(zw,zh)// ctx.closePath()ctx.strokeStyle=col1ctx.fillStyle=colctx.fill()ctx.stroke()}//矩形函数function rects(w,h,ew,eh,col){ctx.beginPath()ctx.rect(w,h,ew,eh)ctx.strokeStyle='#000'ctx.fillStyle=colctx.fill()ctx.stroke()}</script></body></html>
