<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script src="main.js"></script>
</body>
</html>
(function () {
var curX = -400, speed = 1;
var text = "Hello World";
var canvas = document.getElementById("canvas");
var con = canvas.getContext("2d");
function clearCanvas() {
con.clearRect(0, 0, 400, 300);
}
function render() {
clearCanvas();
con.save();
con.font = "50px 宋体";
con.fillStyle = "#abcdef";
con.fillText(text, 80, 250);
con.restore();
con.save();
con.beginPath();
curX += speed;
con.rect(curX, 0, 400, 300);
con.closePath();
con.clip();
con.font = "50px 宋体";
con.fillStyle = "coral";
con.fillText(text, 80, 250);
con.restore();
// console.log("e");
requestAnimationFrame(render);
}
function init() {
render();
}
init();
})();
