<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Круг</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="border:3px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function initdraw(){ //обработчик события onload элемента <body>
x=0;
dx=2;
k=1;
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle="rgba(245,247,184,1)";//цвет заливки
ctx.fillRect(0,0,430,120);//заливаем
setInterval("draw()",100) // периодически вызываем draw()
}
function draw() {
x=x+k*dx;
if (x>300) k=-1;
if (x<0) k=1;
ctx.fillStyle="rgba(245,247,184,1)";//цвет заливки
ctx.fillRect(0,0,120,120);
// создаем радиальный градиент:
var radgrad = ctx.createRadialGradient(50,55,10,57,60,30);
radgrad.addColorStop(0, '#FF5F98');
radgrad.addColorStop(0.8, '#FF0188');
radgrad.addColorStop(1, 'rgba(255,1,80,0)');
// рисуем шар:
ctx.fillStyle = radgrad;
ctx.fillRect(26,29,61,61);
ctx.translate(k*dx,5*Math.cos(20*Math.PI*x/400)); // перемещаем холст
}
</script>
</body>
</html> |