用canvas画了个多啦A梦

学了点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>

用canvas画了个多啦A梦相关推荐

微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明小程序码通过后台接口获取,格式如下:' ...
关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...

用canvas画了个多啦A梦

用canvas画了个多啦A梦相关推荐

最新文章

热门文章