欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html Canvas 画图 能够选择并能移动

程序员文章站 2022-08-10 08:38:06
canvas 画图，能够选中所画的图片并且能够随意移动图片 ......
canvas 画图，能够选中所画的图片并且能够随意移动图片


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="JS/jquery.min.js"></script>
</head>
<body>

    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000; background-color: #CCCCCC;"></canvas>
    <input id="Button1" type="button" value="画矩形" onclick="DrawingRec()" />
    <input id="Button2" type="button" value="画线"  onclick="Drawline()"/>
    <p></p>
</body>
</html>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var list = [];
    var currentImag;
    var ax, ay, x, y;
    var startmove = false;
    var c = document.getElementById("myCanvas");
    c.onmousedown = function (e) {

        for (var i = 0; i < list.length; i++) {
            var w = list[i].x + list[i].width;
            var h = list[i].y + list[i].height;
            if (e.clientX < w && e.clientX > list[i].x && e.clientY < h && e.clientY > list[i].y) {
                currentImag = list[i];
                startmove = true;
                console.log("select: true");
            }

        }


    };
    c.onmousemove = function (e) {
        console.log("x:" + e.pageX + " y:" + e.pageY);
        if (currentImag == null) return;
        console.log("moveselect:true");
        
        x = e.clientX;
        y = e.clientY;

        //限制移动不能超出画布
        (x < 40) ? ax = 20 : ax = 480;
        (y < 40) ? ay = 20 : ay = 380;

        (x < 480 && x > 20) ? x = e.clientX : x = ax;
        (y < 380 && y > 20) ? y = e.clientY : y = ay;

        //清除之前图片然后重新绘制
        ctx.clearRect(0, 0, c.width, c.height);
        currentImag.x = x;
        currentImag.y = y;

        Piant();
        ctx.drawImage(currentImag, x - 20, y - 20, currentImag.width, currentImag.height);

       
    };

    c.onmouseup = function () {
        //c.onmousemove = null;
        //c.onmouseup = null;

        currentImag = null;
        startmove = false;
    };
    function Piant()
    {
        if (startmove)
        {
            for (var i = 0; i < list.length; i++)
            {
                ctx.drawImage(list[i], list[i].x - 20, list[i].y - 20, list[i].width, list[i].height);
            }
        }
    }

    function DrawingRec()
    {
        //ctx.beginPath();
        //ctx.fillStyle = "#000000";
        //ctx.fillRect(200, 100, 150, 75);
        //ctx.closePath();
        

        var img = new Image();
        img.src = "default/images/panel_tools.png";
        img.x = 50;
        img.y = 50;
        img.width = 40;
        img.height = 40;
        ctx.drawImage(img, 50, 50, img.width, img.height);
       


        list.push(img);
    }
</script>

　　

上一篇： ps怎么画一只丑丑的哈巴狗图形?

下一篇： mssql sqlserver 使用sql脚本实现相邻两条数据相减的方法分享

推荐阅读