JSFiddle - React, Tailwind, and code Playground

by Mo Qiao

HTML

<canvas id="canvas">
   当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

CSS

#canvas{
    width: 100%;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var WINDOW_WIDTH = window.screen.availWidth;
var WINDOW_HEIGHT = window.screen.availHeight;
ctx.beginPath();
var ball = {
	x: 100, 
	y: 100,
	vx: 5,
	vy: 2,
	radius: 25,
	color: 'blue',
	draw: function () {
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
		ctx.closePath();
		ctx.fillStyle = this.color;
		ctx.fill();
	}
};

function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ball.draw();
	ball.x += ball.vx;
	ball.y += ball.vy;
	if (ball.y + ball.vy + 25 > canvas.height || ball.y + ball.vy -25 < 0) {
		ball.vy = -ball.vy;
	}
	if (ball.x + ball.vx + 25> canvas.width || ball.x + ball.vx -25 < 0) {
		ball.vx = -ball.vx;
	}
}

 window.setInterval(draw,50);