(function () {
var img;
var canvas = document.getElementById("canvas");
var con = canvas.getContext("2d");
var circleX = 0, circleY = 100, speed = 1;
function loadImage() {
img = new Image();
img.src = "11.jpg";
}
function render() {
circleX += speed;
if (circleX > 300) {
speed = -1;
}
if (circleX < 100) {
speed = 1;
}
con.clearRect(0,0,400,300);
con.save();
con.beginPath();
con.arc(circleX,circleY,100,0,2*Math.PI);
con.closePath();
con.clip();
con.drawImage(img,0,0);
con.restore();
requestAnimationFrame(render);
}
function init() {
loadImage();
render();
}
init();
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script src="main.js"></script>
</body>
</html>