利用canvas画布画哆啦A梦

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

## 简易版哆啦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>
            
            
            <script>
                document.body.onmousemove = function(){ 
                     var x = event.clientX;
                    var y = event.clientY;
                    document.getElementById("d1").innerHTML ="x的坐标为："+ x
                    document.getElementById("d2").innerHTML ="y的坐标为："+ y
                    console.log(x+"-------"+y)
                
                    // var img = document.getElementById("img")
                    // img.onmousemove = function(){ 
                        var x1 = event.screenX;
                        var y1 = event.screenY;
    
                    document.getElementById("d3").innerHTML ="x1的坐标为："+ x1
                    document.getElementById("d4").innerHTML ="y1的坐标为："+ y1
    
                        
                    } 
    
            </script>
        </body>
    </html>