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

関連記事

  1. PHP

    会社でLaravel開発するみたい。

    会社でLaravel開発するみたいな事を言っていた。自分が…

  2. プログラム

    PHPで怒られる怒られない2

    PHPで怒られる怒られないの違いはさて何でしょうか?sel…

  3. Bat処理

    Tera Termで自動ログインする方法:秘密鍵有り無し対応

    秘密鍵有り自動ログインconnect 'ホスト名:22 /…

  4. PHP

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

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

  5. PHP

    ネームスペースの利点はこれだと思っている。

    ネームスペースの利点はこれだと思っている。複数人で開発とか…

  6. sql

    同一TABLEを参照しアップデートする。

    同一TABLEを参照しアップデートする。これでアップデート…

2019年3月
« 2月   4月 »
 123
45678910
11121314151617
18192021222324
25262728293031
PAGE TOP