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