<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>canvas</title> <style type="text/css"> #canvas{ background-color: #eeeeee; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var cobj = canvas.getContext("2d"); var focusLen = 300; var x_3d = 0; var y_3d = 0; var z_3d = 0; var z_speed = 10; cobj.translate(250,250); setInterval(function(){ cobj.clearRect(-250,-250,500,500); z_3d += z_speed; if(z_3d>600 || z_3d<=-260){ z_speed*=-1; } var scales = focusLen/(focusLen+z_3d); var x = x_3d*scales; var y = y_3d*scales; cobj.save(); cobj.translate(x,y); cobj.scale(scales,scales); cobj.beginPath(); var colorObj = cobj.createRadialGradient(3,3,0,0,0,15); colorObj.addColorStop(0,"#cbc0f3"); colorObj.addColorStop(1,"#06198b"); cobj.fillStyle = colorObj; cobj.arc(0,0,15,0,2*Math.PI); cobj.fill(); cobj.restore(); },20); } </script> </body> </html>