HTML5实现一根拉伸的橡皮筋

最新推荐文章于 2021-06-07 19:02:12 发布

侠之大者为国为民

最新推荐文章于 2021-06-07 19:02:12 发布

阅读量2.6k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/sofeien/article/details/41843503

版权

这个示例展示了如何使用HTML5的Canvas API创建一根可拉伸的'橡皮筋'效果。通过监听鼠标事件，当鼠标按下时开始拖动，鼠标移动时更新线条位置，松开鼠标后线条会弹性回弹。用户可以通过调整线条宽度和颜色，观察到实时的变化。

摘要由CSDN通过智能技术生成

<html>
<head>
<title>鼠标事件</title>    
<script>
    var ctx;
    var linew=10;
    var color="rgb(255,0,0)";
    var isClick;
    var mx=50;
    var my=200;
    var tid;
    function setstyle(w,c){
        ctx.lineWidth = w;
        ctx.strokeStyle = c;
    }
    function getpoint(ev){
        if(ev.layerX ||ev.layerX ==0)
        {
            mx = ev.layerX;
            my = ev.layerY;
        }
        else if(ev.offsetX || ev.offsetX == 0 )
        {
            mx = ev.offsetX;
            my = ev.offsetY;
        }
    }
    function drawall(){
        ctx.clearRect(0,0,400,400);
        setstyle(linew,color);
        ctx.beginPath();
        ctx.moveTo(50,200);
        ctx.lineTo(mx,my);
        ctx.lineTo(350,200);
        ctx.stroke();
        setstyle(2,"rgb(0,0,0)");
        ctx.strokeRect(0,0,400,400);
    }
    function init(){
        isCli