記録

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://zip358.com/tool/demo5/js/index-3.html

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

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

関連記事

  1. 記録

    思考のスイッチ面白くて使える思考本をパラパラめくっている。

    思考のスイッチ面白くて使える思考本をパラパラめくっているのでちょっ…

  2. 記録

    クロスプラットフォーム開発(アプリ)をPythonで行う。

    PyQt5でクロスプラットフォーム開発(アプリ)を行う事が出来るだっ…

  3. 記録

    よさこい祭り動画検索WEBアプリを運営しています。

    おはようございます。今日は自分が運営しているWEBアプリ第一弾である…

  4. 記録

    大阪の観光地へ行ってきた!!

    先日、大阪の観光地を巡ってきました。どこもコミコミなので人混みに酔う…

  5. 記録

    映画、トレイン・ミッションを観ましたよ。

    映画、トレイン・ミッションを観ましたよ。この頃、プライムで観ているこ…

2019年3月
 123
45678910
11121314151617
18192021222324
25262728293031

カテゴリー

アーカイブ

PAGE TOP