記録

Canvasで円がぐるぐる回る。

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <canvas id="ctx" ></canvas>
    <script>
            "use strict";
            let x = 0,y = 0;
            let xs = 300,ys = 300;
            let xc = 1,yc = 1;
            let ctx = document.querySelector("#ctx");
            let canvas;
            ctx.width = window.screen.width;
            ctx.height = window.screen.height;
            if(ctx.getContext)
            {
               canvas = ctx.getContext("2d");
               setInterval(draw,77);
            }
            function draw(){
               canvas.beginPath();
               canvas.fillStyle = "#3399ff";
               canvas.arc(x,y,35,0,Math.PI*2,true);
               canvas.globalCompositeOperation = "xor";
               canvas.fill();
                x =((Math.sin (xc) * xs)) + 500;
                y =(Math.cos(yc) * ys) + 500;
                console.log(x + ":" + ctx.width);
                console.log(y + ":" + ctx.height);
                if(x < 0 || x > ctx.width)
                {
                   xs*=-1;
                }
                if(y < 0 || y > ctx.height)
                {
                    ys*=-1;
                }
                if(x<0)
                {
                    x=0;
                }
                if(y<0)
                {
                    y=0;
                }
                if(x > ctx.width)
                {
                    x=ctx.width;
                }
                if( y > ctx.height)
                {
                    y=ctx.height;
                }
                xc+=1
                if(xc>360)
                {
                    xc=0;
                }
                yc+=1
                if(yc>360)
                {
                    yc=0;
                }
            }
        </script>
</body>
</html>

Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://www.zip358.com/tool/demo5/js/index-3.html

活動支援よろしくお願いします

javascriptでEVENT処理レベル1前のページ

σ(゚∀゚ )オレ的速報:基本情報技術者解答生成ツール次のページ

関連記事

  1. 記録

    Notionというアプリが定着しているけどどうなのかな。

    雨はシトシトと降っている、平日に土日の記事を予約投稿しています😄。…

  2. 記録

    何故????

    何故?掘り下げて何故って思えるかですよ?では、また。ブログお休…

  3. 記録

    FF14をプレイしています。土日祝の朝頃から

    先日からFF14をプレイしています、まだFF14の中でもソロです、ヘ…

  4. 記録

    jsって言ってるアレ、そうアレ。

    この頃、知ったんだけど配列とかも参照渡しなんだね・・親切だけどココは…

  5. 記録

    テクノロジー見るだけノートを読み終えた。

    テクノロジー見るだけノートを読み終えたので感想を残しときます。…

  6. 記録

    フェイスブックコネクト2020で思うこと。

    フェイスブックコネクト2020で思うことは、彼らが取り組んでい…

PAGE TOP