記録

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. 記録

    インターネットでTVが見えるようなればどうなるYOUTUBE?

    インターネットでTVが見えるようなればどうなるYOUTUBE?…

  2. 記録

    リニューアル=ブログのデザインを変更しました。

    リニューアル=ブログのデザインを変更しました。心機一転というよりは…

  3. 記録

    北に限らずだけど日本の報道は真実か?それとも虚像か?

    北朝鮮の報道を正確に伝えているような気がしない。北が言っている事も…

  4. 記録

    大塚家具のお家騒動、ぼそぼそと。

    大塚家具のお家騒動でもめてますけど、結局どうなるかは株主しだいって事…

  5. 記録

    bitflyer.comでAPI使ってみたよ、遅っいぞ。

    bitflyer.comでAPI使ってみたよ、遅っいぞ。レスポ…

  6. 記録

    この会社どっちへ向かってんだろと思ったら?

    この会社どっちへ向かってんだろと思ったら新人や中途採用者を見よって話…

PAGE TOP