用CSS設置畫布寬度和高度移動筆

當我用CSS設置畫布寬度和高度時，筆正在移動。在瀏覽器中放大/縮小（鉻）後，筆不再移動。我使用從字面上的畫布小部件，並希望適應畫布到其父div。初始化畫布後，我用jquery css函數設置畫布的寬度/高度。但我的筆不在同一座標上。在當前瀏覽器中滾動或滾動後，筆在我的鼠標指針所在的座標處。誰能幫我？用CSS設置畫布寬度和高度移動筆

$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});

來源

2016-07-06 Muhammet Tasan

你可以分享你的筆的鏈接？ – Pugazh

用帆布你通常找到你需要實際設置寬度和高度通常屬性，而不是CSS /風格的寬度和高度。

我與你的代碼示例共享將嘗試：

$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);

您也可以確認您打算設置「containerWidth」爲畫布的高度和寬度？

關於調整畫布大小，請考慮添加一些像這樣的響應式CSS，以維護位置值，但調整大小以適應移動設備。

canvas { 
    width: 100%; 
    height: auto; 
}

儘管如此，您仍然需要寬度和高度屬性。

來源

2016-07-06 14:52:31 mattpark22

非常感謝！花了很多時間（在發佈這個問題之前），我已經解決了我的問題。目標是，我想覆蓋已經設置'樣式'屬性的畫布。我試圖覆蓋樣式屬性值，我也用attr（）函數設置了寬度和高度。我的錯誤如下：我必須首先刪除任何包含畫布寬度和高度的內聯樣式屬性。所以刪除它們之後，我可以設置高度和寬度屬性以及畫布的正確尺寸。 –

但問題仍然存在於移動模式。我在我的手機上甚至在Chrome開發者工具（移動模式）上測試過它。筆仍然移動。你能幫助解決這個問題嗎？ –

我已經添加了一些CSS來協助在移動模式下的畫布 - 對我上面的帖子，希望這對您的解決方案有用。 – mattpark22

用CSS設置畫布寬度和高度移動筆

回答

相關問題