# Canvasで円がぐるぐる回る。
```javascript
<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> [  広告と収入と狭間.
](https://zip358.com/2026/01/27/%e5%ba%83%e5%91%8a%e3%81%a8%e5%8f%8e%e5%85%a5%e3%81%a8%e7%8b%ad%e9%96%93.html)
[  年齢とか技術とか見た目とかさ.
](https://zip358.com/2026/01/26/%e5%b9%b4%e9%bd%a2%e3%81%a8%e3%81%8b%e6%8a%80%e8%a1%93%e3%81%a8%e3%81%8b%e8%a6%8b%e3%81%9f%e7%9b%ae%e3%81%a8%e3%81%8b%e3%81%95.html)
[  OSS：オープンソースソフトウェア
](https://zip358.com/2026/01/25/oss%ef%bc%9a%e3%82%aa%e3%83%bc%e3%83%97%e3%83%b3%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%bd%e3%83%95%e3%83%88%e3%82%a6%e3%82%a7%e3%82%a2.html)
[  お笑い芸人は貴方より
](https://zip358.com/2026/01/24/%e3%81%8a%e7%ac%91%e3%81%84%e8%8a%b8%e4%ba%ba%e3%81%af%e8%b2%b4%e6%96%b9%e3%82%88%e3%82%8a.html)
[  ドラマ：冬と春のアレ
](https://zip358.com/2026/01/23/%e3%83%89%e3%83%a9%e3%83%9e%ef%bc%9a%e5%86%ac%e3%81%a8%e6%98%a5%e3%81%ae%e3%82%a2%e3%83%ac.html)