利用canvas画布画哆啦A梦

梦里梦外; 2022-12-01 01:26 423阅读 0赞

简易版哆啦A梦源代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>哆啦A梦</title>
  5.         <meta charset="utf-8">
  6.     </head>
  7.     <body>
  8.         <canvas width="400px" height="600px" id="canvas" ></canvas>
  9.         <script>
  10.             window.onload = function(){ 
  11.                 //圆圆的脑袋
  12.                 var cxt = document.getElementById("canvas").getContext("2d");
  13.                 cxt.beginPath();
  14.                 cxt.lineWidth=1;
  15.                 cxt.strokeStyle="black";
  16.                 cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);
  17.                 // createRadialGradient() 方法创建放射状/圆形渐变对象。
  20.                 var head = cxt.createRadialGradient(260,25,8,200,175,175);
  21.                 // addColorStop规定渐变对象中的颜色和停止位置。
  22.                 // stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
  23.                 // color 在 stop 位置显示的 CSS 颜色值。
  24.                 head.addColorStop(0,"white")
  25.                 head.addColorStop(1,"#16B3DC");
  26.                 cxt.fillStyle=head;
  27.                 cxt.fill();
  28.                 cxt.stroke();
  29.                 // 白白的脸蛋
  30.                 cxt.beginPath();
  31.                 cxt.fillStyle='white';
  32.                 cxt.moveTo(110,110);
  33.                 cxt.quadraticCurveTo(-10,200,120,315);
  34.                 cxt.lineTo(280,315);
  35.                 cxt.quadraticCurveTo(410,210,290,110);
  36.                 cxt.lineTo(110,110);
  37.                 cxt.stroke();
  38.                 cxt.fill();
  39.                 //大大的眼睛
  40.                 cxt.beginPath();
  41.                 cxt.lineWidth=1;
  42.                 cxt.fillStyle='white';
  43.                 cxt.moveTo(110,100);
  44.                 cxt.bezierCurveTo(110,25,200,25,200,100);
  45.                 cxt.bezierCurveTo(200,175,110,175,110,100);
  46.                 cxt.moveTo(200,100);
  47.                 cxt.bezierCurveTo(200,25,290,25,290,100);
  48.                 cxt.bezierCurveTo(290,175,200,175,200,100);
  49.                 cxt.fill();
  50.                 cxt.stroke();
  53.                 //红红的鼻子
  54.                 cxt.beginPath();
  55.                 cxt.arc(200,165,25,0,2*Math.PI);
  56.                 var radial = cxt.createRadialGradient(212,155,3,200,165,25);
  57.                 radial.addColorStop(0,"white");
  58.                 radial.addColorStop(1,"#D05823");
  59.                 cxt.fillStyle=radial;
  60.                 cxt.fill();
  61.                 cxt.stroke();
  62.                 //黑黑的眼珠
  63.                 cxt.beginPath();
  64.                 cxt.fillStyle="black";
  65.                 doraemon(cxt,230,130);
  66.                 cxt.fill();
  67.                 cxt.stroke();
  69.                 cxt.beginPath();
  70.                 cxt.fillStyle="black";
  71.                 doraemon(cxt,170,130);
  72.                 cxt.fill();
  73.                 cxt.stroke();
  75.                 //长长的胡子
  76.                 cxt.beginPath();
  77.                 cxt.moveTo(80,175);
  78.                 cxt.lineTo(150,195);
  79.                 cxt.moveTo(80,200);
  80.                 cxt.lineTo(150,205);
  81.                 cxt.moveTo(80,225);
  82.                 cxt.lineTo(150,215);
  83.                 cxt.moveTo(200,195);
  84.                 cxt.lineTo(200,290);
  86.                 cxt.moveTo(250,195);
  87.                 cxt.lineTo(320,175);
  88.                 cxt.moveTo(250,205);
  89.                 cxt.lineTo(320,200);
  90.                 cxt.moveTo(250,215);
  91.                 cxt.lineTo(320,225);
  92.                 cxt.moveTo(80,240);
  93.                 cxt.quadraticCurveTo(200,350,320,240);
  94.                 cxt.stroke();
  95.                 cxt.beginPath();
  96.                 cxt.moveTo(96,316);
  97.                 cxt.lineTo(305,316);
  99.                 cxt.lineTo(320,316);
  100.                 cxt.arcTo(330,316,330,326,10);
  101.                 cxt.lineTo(330,336);
  102.                 cxt.arcTo(330,346,305,346,10);
  103.                 cxt.lineTo(81,346);
  104.                 cxt.arcTo(71,346,71,336,10);
  105.                 cxt.lineTo(71,326);
  106.                 cxt.arcTo(71,316,81,316,10);
  107.                 cxt.lineTo(96,316);
  108.                 //美美的项链
  109.                 var neck = cxt.createLinearGradient(96,316,305,316);
  110.                 neck.addColorStop(0,"#B13209");
  111.                 neck.addColorStop(1,"white");
  112.                 cxt.fillStyle=neck;
  113.                 cxt.fill();
  114.                 cxt.stroke();
  117.                 //短短的肉腿
  118.                 cxt.beginPath();
  119.                 cxt.fillStyle="#0BB0DA";
  120.                 cxt.moveTo(80,346);
  121.                 cxt.lineTo(26,406);
  122.                 cxt.lineTo(65,440);
  123.                 cxt.lineTo(85,418);
  124.                 cxt.lineTo(85,528);
  125.                 cxt.lineTo(185,528);
  126.                 cxt.bezierCurveTo(185,505,215,505,215,528);
  127.                 cxt.lineTo(315,528);
  128.                 cxt.lineTo(315,418);
  129.                 cxt.lineTo(337,440);
  130.                 cxt.lineTo(374,406);
  131.                 cxt.lineTo(320,346);
  132.                 cxt.fill();
  133.                 cxt.stroke();
  135.                 //胖胖的手掌
  136.                 cxt.beginPath();
  137.                 cxt.fillStyle='white';
  138.                 cxt.arc(32,438,32,0,2*Math.PI);
  139.                 cxt.fill();
  140.                 cxt.stroke();
  141.                 //胖胖的手掌
  142.                 cxt.beginPath();
  143.                 cxt.fillStyle='white';
  144.                 cxt.arc(368,438,32,0,2*Math.PI);
  145.                 cxt.fill();
  146.                 cxt.stroke();
  148.                 //可可爱爱肚兜
  149.                 cxt.beginPath();
  150.                 cxt.fillStyle="white";
  151.                 cxt.arc(200,399,90,1.8*Math.PI,1.2*Math.PI);
  152.                 cxt.fill();
  153.                 cxt.stroke();
  155.                 cxt.beginPath();
  156.                 cxt.moveTo(130,399);
  157.                 cxt.lineTo(270,399);
  158.                 cxt.bezierCurveTo(270,489,130,489,130,399);
  159.                 cxt.stroke();
  161.                 //叮叮当当
  162.                 cxt.beginPath();
  163.                 cxt.arc(200,358,28,0,2*Math.PI);
  164.                 var neck = cxt.createRadialGradient(220,340,0,200,358,30);
  165.                 neck.addColorStop(0,"white");
  166.                 neck.addColorStop(1,"#F1EB55");
  167.                 cxt.fillStyle=neck;
  168.                 cxt.fill();
  169.                 cxt.stroke();
  171.                 cxt.beginPath();
  172.                 cxt.moveTo(178,340);
  173.                 cxt.lineTo(222,340);
  174.                 cxt.moveTo(173,349);
  175.                 cxt.lineTo(226,349);
  176.                 cxt.moveTo(200,367);
  177.                 cxt.lineTo(200,387);
  178.                 cxt.stroke();
  180.                 cxt.beginPath();
  181.                 cxt.fillStyle="black";
  182.                 cxt.arc(200,363,8,0,2*Math.PI);
  183.                 cxt.fill();
  184.                 cxt.stroke();
  186.                 //谁的白脚
  187.                 cxt.beginPath();
  188.                 cxt.moveTo(85,528),
  189.                 cxt.lineTo(75,528),
  190.                 cxt.bezierCurveTo(50,528,50,562,75,562);
  191.                 cxt.lineTo(185,562);
  192.                 cxt.bezierCurveTo(204,562,204,528,185,528);
  193.                 cxt.stroke();
  194.                 //哦原来是你的
  195.                 cxt.beginPath();
  196.                 cxt.moveTo(215,528),
  197.                 cxt.bezierCurveTo(196,528,196,562,215,562);
  198.                 cxt.lineTo(325,562);
  199.                 cxt.bezierCurveTo(345,562,345,528,325,528);
  200.                 cxt.lineTo(315,528);
  201.                 cxt.stroke();
  203.             }
  204.             //两眼珠的共同方法
  205.             function doraemon(cxt,x,y){ 
  206.                 cxt.arc(x,y,12,0,2*Math.PI);
  207.             }
  211.         </script>
  214.     </body>
  215. </html>

利用原生js获取坐标：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>DOM事件</title>
  5.         <meta charset="utf-8">
  6.     </head>
  8.     <body>
  9.         <style>
  10.             body{ margin: 0 auto;}
  11.             div{ width: 100px;height: 100px;border:1px solid black}
  12.         </style>
  13.         <div id="d1" >x的值为：</div>
  14.         <div id="d2">y的值为：</div>
  15.         <div id="d3" >x1的值为：</div>
  16.         <div id="d4">y1的值为：</div>
  17.         <!-- <img src="img\index1.jpg" id="img" onclick="add()"> -->
  19.         <script>
  20.             document.body.onmousemove = function(){ 
  21.                  var x = event.clientX;
  22.                 var y = event.clientY;
  23.                 document.getElementById("d1").innerHTML ="x的坐标为："+ x
  24.                 document.getElementById("d2").innerHTML ="y的坐标为："+ y
  25.                 console.log(x+"-------"+y)
  27.                 // var img = document.getElementById("img")
  28.                 // img.onmousemove = function(){ 
  29.                     var x1 = event.screenX;
  30.                     var y1 = event.screenY;
  32.                 document.getElementById("d3").innerHTML ="x1的坐标为："+ x1
  33.                 document.getElementById("d4").innerHTML ="y1的坐标为："+ y1
  36.                 } 
  38.         </script>
  39.     </body>
  40. </html>

发表评论

表情：
评论列表 （有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读