利用canvas画布画哆啦A梦

简易版哆啦A梦源代码：

<!DOCTYPE html>
<html><head><title>哆啦A梦</title><meta charset="utf-8"></head><body><canvas width="400px" height="600px" id="canvas" ></canvas><script>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);}</script></body>
</html>

利用原生js获取坐标：

<!DOCTYPE html>
<html><head><title>DOM事件</title><meta charset="utf-8"></head><body><style>body{margin: 0 auto;}div{width: 100px;height: 100px;border:1px solid black}</style><div id="d1" >x的值为：</div><div id="d2">y的值为：</div><div id="d3" >x1的值为：</div><div id="d4">y1的值为：</div><!-- <img src="img\index1.jpg" id="img" onclick="add()"> --><script>document.body.onmousemove = function(){var x = event.clientX;var y = event.clientY;document.getElementById("d1").innerHTML ="x的坐标为："+ xdocument.getElementById("d2").innerHTML ="y的坐标为："+ yconsole.log(x+"-------"+y)// var img = document.getElementById("img")// img.onmousemove = function(){var x1 = event.screenX;var y1 = event.screenY;document.getElementById("d3").innerHTML ="x1的坐标为："+ x1document.getElementById("d4").innerHTML ="y1的坐标为："+ y1} </script></body>
</html>

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

教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
HTML5利用canvas画布绘制哆啦A梦
效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
最近在学canvas元素,标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数 ...
利用border属性画哆啦A梦
利用boder-raduis画图我们都知道用border-raduis可以给盒子画圆角,做头像让它看起来更加柔和,但其实它还有更大的价值,博主就用border-raduis画了个多啦A梦(因为我很喜 ...
利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来. **思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式.再利用画布的ro ...
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
这篇文章主要介绍了JavaScript学习小结之使用canvas画"哆啦A梦"时钟的相关资料,需要的朋友可以参考下前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的 ...
用python画哆啦a梦的身体_每天一个Python小技巧，用Python 画个多啦A梦，小猪佩奇，文末还有Python入门学习视频...
见网络上有人用Python 画出来个多啦A梦,很是新奇,来来来,我们看一下他们主要用到的库. 其实主要用的库就一个 turtle 库先说明一下turtle绘图的基础知识: 1. 画布(canvas) ...
前端|利用canvas画布制作地球轨道
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 一.什么是<canvas> <canvas& ...
python编程100例海绵宝宝-用python画哆啦a梦
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 也收到了读者想用 python 画各种图的各种需求. 和一些读者沟通后才 ...

利用canvas画布画哆啦A梦

简易版哆啦A梦源代码：

利用原生js获取坐标：

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

最新文章

热门文章