HTML5实现一根拉伸的橡皮筋

侠之大者为国为民

于 2014-12-10 10:56:03 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/sofeien/article/details/41843503

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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(){
        isClick = false;
        ctx=document.getElementById('canvas').getContext('2d