javaScript

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

The following two tabs change content below.
zip358と申します。 まったりWEB日誌を更新している中の人です? 趣味は映画鑑賞とブログ書きです、 こちらで生活できるようになるのが目標です。 ブックマークやシェアして頂けると励みになります。 どうぞよろしくお願い致します。

最新記事 by zip358 (全て見る)

関連記事

  1. プログラム

    xdebugの動作仕方が分からなかったのでメモ。

    Xdebugを動作させます。(F5)次にブラウザを開き動作…

  2. プログラム

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

    σ(゚∀゚ )オレ的速報:基本情報技術者解答生成ツール4月…

  3. jquery

    jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。

    jqueryのイベント処理時に引数を受け渡す方法を知っとくと…

  4. PHP

    WordPressの全記事の中からランダムで記事をピックアップしてツイートする。

    WordPressの全記事の中からランダムで記事をピックアップ…

  5. コマンド

    テストサーバーを適当に立ち上げる。

    テストサーバーを適当に立ち上げる方法を録画してみました。最初…

2019年3月
 1234
567891011
12131415161718
19202122232425
262728 

アクセスカウンター😅

とある高知県の気温や湿度

Twitter でフォロー

PAGE TOP