HTML5利用canvas画布绘制哆啦A梦

效果图：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>蓝胖子</title><style>canvas {display:block;margin:0 auto;}</style>
</head>
<body>
<div><canvas id="canvas"></canvas></div>
<script>var oCanvas = document.getElementById("canvas");oCanvas.width = 600;oCanvas.height = 600;var context = oCanvas.getContext("2d");// 脑袋context.beginPath();context.arc(300, 300, 250, 0, Math.PI * 2);context.lineWidth = "5";context.stroke();context.fillStyle = "rgb(34,118,207)";context.fill();// 脸context.beginPath();context.ellipse(300, 380, 200, 170, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 嘴context.beginPath();context.arc(300, 460, 50, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(300, 470, 48, 40, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "red";context.fill();// 眼context.beginPath();context.ellipse(248, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(270, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(270, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(352, 230, 50, 60, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();context.beginPath();context.ellipse(330, 230, 20, 30, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "black";context.fill();context.beginPath();context.ellipse(330, 230, 5, 10, 0, 0, Math.PI * 2);context.stroke();context.fillStyle = "white";context.fill();// 鼻context.beginPath();context.lineWidth = "3";context.arc(300, 290, 30, 0, 2 * Math.PI);context.stroke();context.fillStyle = "red";context.fill();// 胡子context.lineWidth="5";beard(125,294,230,335);beard(113,370,222,366);beard(125,434,222,398);beard(376,335,465,282);beard(385,369,490,354);beard(385,400,488,420);// 画胡子的方法function beard(x1, y1, x2, y2) {context.beginPath();context.moveTo(x1, y1);context.lineTo(x2, y2);context.stroke();}
</script>
</body>
</html>

HTML5利用canvas画布绘制哆啦A梦相关推荐

教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
利用canvas画布画哆啦A梦
简易版哆啦A梦源代码: <!DOCTYPE html> <html><head><title>哆啦A梦</title><meta ch ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
H5 canvas画布总结（绘制哆啦A梦）
canvas标签只是图形容器定义图形,使用 canvas 绘制路径,盒.圆.字符以及添加图像 1.创建一个画布 <canvas id='cv' width='400px' height='60 ...
【python】利用python的tkinter-canvas函数绘制哆啦A梦过程详解（附源码）
1 引言绘制哆啦A梦的过程,其实是对哆啦A梦进行拆解的过程,得先构思出他的头部.眼睛.鼻子.嘴巴.胡须.身体.铃铛.口袋.手以及脚等(如下图所示),才能进行下一步的绘画工作.心中有丘壑,方能水到渠 ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
HTML5之canvas画布教你绘画小黄人
HTML5之canvas画布教你绘画小黄人 Canvas画布:顾名思义绘画的基础,也是一幅画作的根.同样,我们学习技术也需要一步步往上走立好自己根,才能更好的成长.有一些东西总不能完美,但我们都有追求 ...
前端|利用canvas画布制作地球轨道
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 一.什么是<canvas> <canvas& ...
python画图哆啦a梦-使用Python的Turtle绘制哆啦A梦实例
这是我几年前为了练习python的turtle库而画的,今天翻出了代码,分享给大家. 这是我初学python时画的,当时还没有面向对象的概念,也没有采取类方法之类,纯原始手工,供大家参考. 若有兴趣可 ...

HTML5利用canvas画布绘制哆啦A梦

效果图：

源码如下：

HTML5利用canvas画布绘制哆啦A梦相关推荐

最新文章

热门文章