Question

var canvas,cxt,h,w;
            var m= {
                x: 10,
                y: 10,
                height: 100,
                width: 100,
                sx: 2,
                sy: 3
            }

            var b= {
                x: 100,
                y: 300,
                radius: 30,
                sx: 5,
                sy: 4
            }

            function init(){
                canvas= document.getElementById('style');
                canvas.innerHTML;
                cxt= canvas.getContext('2d');
                h= canvas.height;
                w= canvas.width;

                main();
            }

            function main(){
                cxt.clearRect(0,0,h,w);
                drawMonster();
                drawBall();
                moveMonster();
                moveBall();
                requestAnimationFrame(main);
            }

            function drawMonster(){
                cxt.save();
                cxt.translate(m.x,m.y);
                cxt.fillStyle= 'red';
                cxt.fillRect(0,0,m.height,m.width);
                cxt.fillStyle= 'black';
                cxt.fillRect(15,10,5,5);
                cxt.fillRect(80,10,5,5);
                cxt.fillRect(45,30,5,30);
                cxt.beginPath();
                cxt.arc(48,80,10,0,Math.PI);
                cxt.fill();
                cxt.restore();
            }

            function drawBall(){
                cxt.save();
                cxt.translate(b.x,b.y);
                cxt.beginPath();
                cxt.arc(0,0,b.radius,0,2*Math.PI);
                cxt.fill();
                cxt.restore();
            }

            function moveMonster(){
                m.x= m.x+m.sx;
                m.y= m.y+m.sy;
                checkMonster();
            }

            function moveBall(){
                b.x+= b.sx;
                b.y+= b.sy;
                checkBall();
            }

            function checkMonster(){
                if((m.x+m.width>w)||(m.x==0)){
                    m.sx= -m.sx;
                }
                if((m.y+m.height>550)||(m.y==1)){
                    m.sy= -m.sy;
                }
            }

            function checkBall(){
                if(b.x+b.radius>w){
                    b.x= w-b.radius;
                    b.sx= -b.sx;
                }
                else if(b.x-b.radius<0){
                    b.x= b.radius;
                    b.sx= -b.sx;
                }
                if(b.y+b.radius>550){
                    b.y= 550-b.radius;
                    b.sy= -b.sy;
                }
                else if(b.y-b.radius<0){
                    b.y= b.radius;
                    b.sy= -b.sy;
                }
            }

#style{
                margin-left: 0.5cm; 
            }

            #first{
                background: radial-gradient(rgb(184, 182, 182),rgb(10, 0, 0));
            }

            #second{
                font-size: 70px;
                font-style: italic;
                font-weight: bolder;
                color: rgb(53, 21, 21);
                margin-left: 5cm;
                margin-right: 5cm;
                padding-left: 2cm;
                /*background-color: rgb(184, 182, 182);
                border: 2px inset black;*/
            }

            #form{
                margin-top: 20cm;
                margin-left: 15cm;
            }

<!DOCTYPE html>
<html lang= 'en-us'>
    <head>
        <title>Welcome</title>
    </head>
    <body onload= 'init();' id= 'first'>
        <!--div id= 'menu'></div-->
        <div>
            <div id='second'>FEED THE MONSTER</div> 
            <!--a href= 'D:\visual studio\javascript_edx\Feed_the_monster.html' rel= 'main page' id= 'third'>PLAY</a-->
            <br><br>
            <canvas id= 'style' height= '1200' width= '1200'>
                Your browser does not support canvas...
            </canvas>

        </div>
     </body>
</html>

在下面的代码中，我想在标题与框和球在后台移动之后立即创建一个表单，但是如果这样做，它将在canvas属性之后创建，但是我希望将该表单包含在canvas属性。我什至不知道我想要什么是可能的请帮助我...

在画布中创建表单

0 个答案: