时间戳

首页 > 解决方案 > 无法在多个画布上绘制

javascript - 无法在多个画布上绘制

问题描述

如何加载多个画布并在其上启用绘图。目前，它在我的页面上显示了两个画布，但我只能在一个画布上绘制。我在数据库中有两条记录。foreach下面的循环制作两个画布，但我只能在一个画布上绘制，而不是在两个画布上。我应该能够在两个画布上画画，这就是我想要的东西。我正在寻找关于我应该如何做的任何帮助或任何提示，以便我可以在动态生成的所有画布上绘图。

 <body onload="init()">
    
        <canvas  id="can_{{$draw->id}}" width="1200" height="400" 
            style="position:absolute;top:10%;left:10%;border:2px solid;">
        </canvas>
        
       
    </body>

下面是允许用户在画布图像上绘制的 js 代码

 <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;
    
    var x = "red",
        y = 2;
    
    function init() {
for(let i=1;i<3;i++){
        canvas = document.getElementById('can_'+i);
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
        //
       
        canvas.addEventListener("mousemove", function (e){
            findxy('move', e)
          
            
    
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    
      
    }//end of for
    }
    
    function draw() {
        
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }
    
      
    
    function findxy(res, e) {
    
        
        if (res == 'down') {
            
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.getBoundingClientRect().left;
            currY = e.clientY - canvas.getBoundingClientRect().top;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.getBoundingClientRect().left;
                currY = e.clientY -canvas.getBoundingClientRect().top;
                draw();
    
            }
        }
    
    }
    
    </script>

标签： javascripthtmlcanvashtml5-canvas

解决方案

这是一个利用我们知道哪个画布生成鼠标事件这一事实的解决方案。既然我们知道这一点，我们就可以使用它来获取正确画布的上下文。

我显示了 mousemove 和 mousedown 的消息，指示哪个画布触发了该事件。

<!doctype html>
<html>
<head>
<script>
"use strict";

   var canvas, ctx, flag = false,
        prevx = 0,
        curx = 0,
        prevy = 0,
        cury = 0,
        dot_flag = false;
    
    var x = "red",
        y = 2;

window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    let canvasElems = document.querySelectorAll('canvas');
    canvasElems.forEach( 
                         can => {
                            can.addEventListener('mousemove', function(evt){ findxy('move', evt, this);}, false);
                            can.addEventListener('mousedown', function(evt){ findxy('down', evt, this);}, false);
                            can.addEventListener('mouseup', function(evt){ findxy('up', evt, this);}, false);
                            can.addEventListener('mouseout', function(evt){ findxy('out', evt, this);}, false);
                         } );
}

function findxy(reason, evt, elem)
{
    if (reason=='up' || reason=='out')
        flag = false;
        
    if (reason == 'down')
    {
        document.querySelector('#output').textContent = elem.getAttribute('name') + ' was clicked';

        prevx = curx;
        prevy = cury;
        curx = evt.clientX - elem.getBoundingClientRect().left;
        cury = evt.clientY - elem.getBoundingClientRect().top;
        flag = true;
        dot_flag = true;
        //if (dot_flag) 
        //{
                let ctx = elem.getContext('2d');
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(curx, cury, 2, 2);
                ctx.closePath();
                dot_flag = false;
        //}
    }
    else if (reason == 'move')
    {
        document.querySelector('#output').textContent = elem.getAttribute('name') + ' was moved over';
        if (flag)
        {
            prevx = curx;
            prevy = cury;
            curx = evt.clientX - elem.getBoundingClientRect().left;
            cury = evt.clientY - elem.getBoundingClientRect().top;
            draw(elem);
        }
    }
}

function draw(tgtCanvas) 
{
    let ctx = tgtCanvas.getContext('2d');
    
    ctx.beginPath();
    ctx.moveTo(prevx, prevy);
    ctx.lineTo(curx, cury);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}
</script>
<style>
canvas
{
    margin: 4px;
    border: solid 1px #333;
}
</style>
</head>
<body>
    <canvas name='canvas1'></canvas><canvas name='canvas2'></canvas>
    </br>
    <span id='output'></span>
</body>
</html>

推荐阅读