圓點自動跟隨滑鼠移動
阿新 • • 發佈：2018-11-30
思路：在畫布上繪製一個圓點，在移動滑鼠時用背景圖覆蓋上一次的圖片，然後再在這張背景圖上繪製一個原點，利用定時器每隔10ms進行一次重新整理
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" Style="background: green; border:solid black thin" width="600px" height="500px"></canvas><!--畫布-->
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var img = new Image();//新建一個圖片，用來覆蓋上一次滑鼠移動產生的圖片
img.src = "greenCanvas.png";
var x=100,y=100;
setInterval(function () {//設定定時器
context.drawImage(img, 0, 0);//繪製背景圖
context.beginPath();
context.arc(x, y, 10, 0, Math.PI * 2, false);
context.fill();//繪製圓點
}, 10);
canvas.onmousemove = function (event) {//獲得滑鼠的位置
x = event.offsetX;
y = event.offsetY;
};
</script>
</body>
</html>
效果圖：
注：次數這個點是跟著滑鼠進行移動的，由於只能上傳圖片而不能上傳視訊，所以就只能有這個效果圖了