首頁 > web前端 > html教學 > 如何清除HTML5畫布上的圖表,以防止觸發懸停事件?

如何清除HTML5畫布上的圖表,以防止觸發懸停事件?

PHPz
發布: 2023-08-20 20:41:19
轉載
1450 人瀏覽過

如何清除HTML5畫布上的圖表,以防止觸發懸停事件?

要清除畫布上的圖表,請刪除元素,然後將一個新的元素附加到父容器中,如下所示的程式碼:

var resetCanvas = function(){
   $('#results-graph').remove();  
   $(&#39;#graph-container&#39;).append(&#39;<canvas id = "results-graph"><canvas>&#39;);
   canvas = document.querySelector(&#39;#results-graph&#39;);

   ct = canvas.getContext(&#39;2d&#39;);
   ct.canvas.width = $(&#39;#graph&#39;).width(); // here we are resizing the new canvas element to parent width
   ct.canvas.height = $(&#39;#graph&#39;).height(); // here we are resizing the new canvas element to parent height
   var a = canvas.width/2;
   var b = canvas.height/2;

   ct.font = &#39;12pt Calibri&#39;;
   ct.textAlign = &#39;Align Left&#39;;
   ct.fillText(&#39;left aligned text on the canvas&#39;, a, b);
};
登入後複製

以上是如何清除HTML5畫布上的圖表,以防止觸發懸停事件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板