HTML5對鼠標移動

畫布背景圖像消失，我想畫的圖像以帆布，然後允許用戶繪製it.i'm使用jQuery的sketch.js當前library.the狀態上的一些素描是：HTML5對鼠標移動

圖像已成功加載到畫布上
但是當我的鼠標放在畫布上時，圖像就消失了。
當我拖着鼠標，就空canvas.the一些草圖顯示淹沒

正確

所以，我認爲sketch.js沒有明確的canvas.but我不知道如何解決它。任何幫助？

canvas.html

<canvas id="tools_sketch" width="300" height="300" style="background: no-repeat center center;border:black 1px solid"></canvas>

這裏是我的腳本

<script type="text/javascript"> 
    var sigCanvas = document.getElementById('tools_sketch'); 
    var context = sigCanvas.getContext('2d'); 
    var imageObj = new Image(); 
    imageObj.src = 'human-face.jpg'; 
    imageObj.onload = function() { 
     context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.width); 
    }; 

    $(function() { 
     $('#tools_sketch').sketch({defaultColor: "#FF0000"}); 
    }); 

</script>

來源

2013-06-01 user1429833

我檢查了你的代碼......它消失在mousedown而不是鼠標懸停！ – thinklinux

是的..無論如何，當我拖動鼠標草圖顯示空的畫布。沒有問題，草圖看起來是正確的 – user1429833

如果你並不需要保存圖像，你可以把它作爲背景畫布。你不需要每次都繪製它。

style="background: url(your-image-here) no-repeat center center;"

<canvas id="tools_sketch" width="300" height="300" style="background: url(your-image-here) no-repeat center center;"></canvas>

UPDATE

這是在sketch.js的錯誤。你需要從sketch.js源中刪除這一行：

this.el.width = this.canvas.width()

由於canvas元素工作的方式。每次調整大小後都要清除畫布，sketch.js需要在調整大小後重新繪製，但lib不知道圖像。

來源

2013-06-01 06:48:47 thinklinux

如果沒有問題，我想保存繪圖。 – user1429833

好的。我找到了。這是sketch.js中的一個錯誤。從sketch.js文件中刪除這一行：'this.el.width = this.canvas.width（）;' – thinklinux

哦..它的工作非常感謝你親愛的..！你讓我的一天非常感謝你。 – user1429833

this.el.width = this.canvas.width()

只是刪除這一行你sketch.js

我不知道爲什麼他們沒有更新此sketch.js即使我們發現的缺陷&解決方案

來源

2013-11-20 09:34:28

刪除寬度=行工作，但我如果使用rgba（0,0,255,0.5）繪製，則會發現，您將最終使用rgba（0,0,255,1）進行繪製。

原因是：當鼠標移動時，每次都會調用重畫。所以畫布會被重置，每個以前的點都會被繪製出來。當上面一行被移除時，相同的像素將被多次繪製，從而去除透明。（透明加起來，爲1）

來源

2016-08-04 20:48:26

HTML5對鼠標移動

回答

相關問題