zoukankan      html  css  js  c++  java
  • 圆点自动跟随鼠标移动

    <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;500px;height:500px"></div>
    <script src="two.js"></script>
    <script>
    var div = document.querySelector("#div");
    var two = new Two({
    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>

    效果图:

    
    
    
    
  • 相关阅读:
    java实现可安装的exe程序
    WINDOWS上使用BAT定期执行备份操作
    Freemaker基于word模板动态导出
    网页静态化Freemarker
    Linux下Mysql每天自动备份
    搭建cas单点登录服务器
    GridView多列排序
    python学习-发送邮件(smtp)
    python3+selenium3学习——发送邮件
    redis相关-基础语法
  • 原文地址:https://www.cnblogs.com/MrZWJ/p/10046931.html
Copyright © 2011-2022 走看看