圓點自動跟随滑鼠移動

<canvas>繪制思路：在畫布上繪制一個圓點，在移動滑鼠時用背景圖覆寫上一次的圖檔，然後再在這張背景圖上繪制一個原點，利用定時器每隔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>
效果圖：

注：次數這個點是跟着滑鼠進行移動的，由于隻能上傳圖檔而不能上傳視訊，是以就隻能有這個效果圖了

two.js繪制思路：div當作畫布，先在div上畫一個圓，在two.js的bind方法中傳入update事件和方法，随着滑鼠的移動持續改變圓的圓心坐标，達到圓心跟随滑鼠移動的效果

源碼：

<!doctype html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
</head>
<body>
<div id="div" style="border:1px solid black;width:500px;height:500px"></div>
<script src="two.js"></script>
<script>
    var div = document.querySelector("#div");
    var two = new Two({
        width: 500,
        height: 500
    }).appendTo(div);
    var circle = two.makeCircle(100, 100, 20);
    circle.fill = "black";

    two.bind("update", function () {
        div.onmousemove = function (event) {
            var x = event.offsetX;
            var y = event.offsetY;
            circle.translation.set(x, y);
            two.update();
        };
    }).play();
</script>

</body>
</html>

效果圖：

發表于

2018-11-30 22:34

MrZWJ

閱讀(872)

評論(0)

編輯

舉報