在多個畫布中無縫繪圖

Question

我正在嘗試使用JS和Canvas元素制作一個簡單的繪圖工具。 我的問題是我想擁有多個畫布，並且用戶應該能夠通過所有畫布畫一條線。 這是我做的一小頁：

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

    <script type="text/javascript">

        var act = null;
        var context = null;
        var draw = false;
        var c = false;

        function boot() {
            $('.can')
                .mouseenter(function(){
                    act = this;
                    context = act.getContext('2d');
                   // console.log(this);

                })
                .mouseleave(function(){
                    act = null;
                    context = null;
               //     console.log('out');
                })
                .mousedown(function(){
                    draw = true;
                })
                .mouseup(function(){
                    draw = false;
                })
                .mousemove(function(ev){

                //    console.log(act);
                      if (ev.layerX || ev.layerX == 0) { // Firefox
                        x = ev.layerX;
                        y = ev.layerY;
                      } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                        x = ev.offsetX;
                        y = ev.offsetY;
                      }

                    if(draw && context != null)
                      if (!c) {
                        context.beginPath();
                        context.moveTo(x, y);
                        c = true;
                      } else {
                        context.lineTo(x, y);
                        context.stroke();
                      }
                });
        }

        $(document).ready(boot); 
    </script>

    <style>
        .can {border: 1px solid blue; display:block; float:left; margin:0;}
    </style>

</head>

<body>
    <canvas class="can" id="c2" width="200" height="200"></canvas>
    <canvas class="can" id="c1" width="200" height="200"></canvas>
    <canvas class="can" id="c3" width="200" height="200"></canvas>
</body>
</html>

而且它部分起作用：我只能在第一個畫布中繪制。 我對其進行了調試，並感到非常困惑，因為上下文按預期進行了更改，並且僅在第一個畫布中啟用了繪制。

任何想法是什么原因導致這種行為？

Answer 1

好的，我找到了問題的根源。 原始文件在這里：

http://jsfiddle.net/CVFv5/4/

固定版本在這里：

http://jsfiddle.net/CVFv5/3/

基本上，問題是您沒有正確計算X和Y變量。 .offsetX和.offsetY計算相對於元素直接祖先的x和y位置（在本例中為頁面的主體）。 您可以通過在鼠標懸停時提醒x和y值來查看此情況。 無論如何，您要做的是：

var o = $(this).offset(),
    x = (ev.pageX - o.left),
    y = (ev.pageY - o.top);

您的代碼還存在其他一些我已更改的問題。 首先，您並沒有為每個畫布開始新的路徑，所以當您重新進入畫布時，它將從該行中斷處開始lineTo(x, y) 。 為了解決這個問題，我使您的mouseout事件看起來像這樣：

.mouseout(function() {
    c=false;
})

現在，無論何時進入新畫布，它將開始一條新路徑。

我改變的第三件事是讓這個只在文件准備創建上下文一次。 我想這可以節省一些處理。 所以我在全局范圍內添加了這一行：

var contexts = [];

$('.can')方法鏈中的此方法：

.each(function(el) {
    id = this.id;
    contexts[id] = this.getContext('2d');
})

因此，在代碼的其他任何地方，您都可以像這樣引用它：

contexts[this.id].beginPath();

現在就可以了。

在多個畫布中無縫繪圖

問題描述

1 個解決方案

解決方案1
3 已采納 2010-10-29 00:15:29

在多個畫布中無縫繪圖

問題描述

1 個解決方案

解決方案1 3 已采納 2010-10-29 00:15:29

解決方案1
3 已采納 2010-10-29 00:15:29