Canvas | zip358.com

Canvasで円がぐるぐる回る。

2019.03.09

<!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

タグ

0, １, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,

There is a library file called “Three.js”.
Overwhelming lettering processing can be done on “canvas”.
I initially thought that it would be running on “node.js”.That was a mistake.
Using “Three.js” enables advanced lettering processing. For example, if you use “game development”, “alternative to Flash” etc, a new world will open out.
The other day my colleague was pleased to tell me the library file “Three.js”.I think this is a libraryfile worth studying.
https://threejs.org/
https://github.com/mrdoob/three.js/
https://liginc.co.jp/web/html-css/html/91988
https://liginc.co.jp/315939

タグ

a new world will open out, alternative to Flash, Canvas, enables advanced lettering processing, For example, game development, I initially thought that it would be, I think this is a libraryfile worth, if you use, JavaScript 3Dライブラリ, node.js, Overwhelming lettering processing can be done on, That was a mistake, The other day my colleague was pleased, There is a library file called, Three.js, Three.js is great, WebGL,

Canvasで円がぐるぐる回る。

Three.js is great!!