記録

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

    45歳定年制提言したサントリーの社長さん、世間が見えていないと思った件。

    天気予報の予報では高知県、深夜に台風が通り過ぎる予定になり朝には晴天…

  2. 記録

    クローラーするサービスの基礎。

    クローラーするサービスの基礎のソースを載せときます。殆どサイボウズ・…

  3. 記録

    サイトの評価さげても意味はない。

    サイトの評価さげてもアクセス数を減らしても意味はあまりない。もとも…

  4. 記録

    基本情報技術者試験を受けなかった。

    基本情報技術者試験試験を受けなかった。受けなかった理由、受ける気が…

  5. 記録

    年賀状の季節が・・・・。

    今日はまったり、年賀状制作をします。テロ的な要素で今まで送ったことが…

  6. 記録

    マコなり社長がネット上とリアルで炎上している件。

    コロナワクチン二回目を打ってきました。重い副反応もなく自宅で明日の記…

2019年3月
 123
45678910
11121314151617
18192021222324
25262728293031

カテゴリー

PAGE TOP