はじめに
canvasのサイズを変更するときに挙動がおかしくなってしまう人のための記事です。
検証してみた
- 良い例 -
- cssで指定せずに幅、高さを設定する
canvas.width = 500;
canvas.height = 500;
- 悪い例 -
- cssで幅、高さを設定
canvas.style.width = 500 + "px";
canvas.style.height = 500 + "px";
canvasを使ってみた
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hand spinner</title>
<style>
body {
margin: 0;
background-color: #000;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
const hand_spinner = (leftX, topY, hand_spinner_count) => {
let main = document.getElementById('main');
main.style.position = "relative";
let canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
canvas.style.left = leftX + "px";
canvas.style.top = topY + "px";
canvas.style.position = "absolute";
main.appendChild(canvas);
let rgb = {
r: Math.floor(Math.random() * 256),
g: Math.floor(Math.random() * 256),
b: Math.floor(Math.random() * 256)
};
const draw_circle = (x_center, y_center, radius) => {
let context = canvas.getContext('2d');
context.strokeStyle = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
context.beginPath();
context.arc(x_center, y_center, radius, 0, Math.PI * 2, false);
context.closePath();
context.stroke();
}
draw_circle(100, 100, 20);
draw_circle(100, 49, 30);
draw_circle(100, 151, 30);
draw_circle(49, 100, 30);
draw_circle(151, 100, 30);
draw_circle(100, 100, 10);
draw_circle(100, 49, 20);
draw_circle(100, 151, 20);
draw_circle(49, 100, 20);
draw_circle(151, 100, 20);
let transform_t_clockwise = 0;
let transform_t_counterclockwise = 360;
let speed = Math.floor(Math.random() * 6) + 2;
let magic_interval;
if(hand_spinner_count % 2 === 0) {
magic_interval = setInterval(() => {
canvas.style.transform = `rotateZ(${transform_t_clockwise}deg)`;
transform_t_clockwise += speed;
if(transform_t_clockwise >= 360) {
transform_t_clockwise = 0;
}
}, 1);
} else {
magic_interval = setInterval(() => {
canvas.style.transform = `rotateZ(${transform_t_counterclockwise}deg)`;
transform_t_counterclockwise -= speed;
if(transform_t_counterclockwise <= 0) {
transform_t_counterclockwise = 360;
}
}, 1);
}
setTimeout(() => {
clearInterval(magic_interval);
main.removeChild(canvas);
}, 1000);
}
const call_hand_spinner = () => {
let hand_spinner_count = 0;
let main_magic_interval = setInterval(() => {
hand_spinner(
Math.floor(Math.random() * 1601),
Math.floor(Math.random() * 701),
hand_spinner_count
);
hand_spinner_count++;
}, 15);
addEventListener('keydown', (event) => {
switch(event.keyCode) {
case 81: //81 == q
clearInterval(main_magic_interval);
break;
case 82: //82 == r
location.reload();
break;
}
});
}
call_hand_spinner();
</script>
</body>
</html>
test.html結果
- 一番スムーズに動いたブラウザはchromeです(画面size: 1920*1080)。
@altさん編集リクエストありがとうございます。