如何从 HTML5 画布中清除图表,以便无法触发悬停事件?

htmljavascriptprogramming scripts

要从画布中清除图表,请删除 <canvas> 元素,然后将新的 <canvas> 元素附加到父容器,如以下代码所示 −

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

   ct = canvas.getContext('2d');
   ct.canvas.width = $('#graph').width(); // 这里我们将新的画布元素的大小调整为父元素的宽度
   ct.canvas.height = $('#graph').height(); // 这里我们将新的画布元素的大小调整为父元素的高度
   var a = canvas.width/2;
   var b = canvas.height/2;

   ct.font = '12pt Calibri';
   ct.textAlign = 'Align Left';
   ct.fillText('left aligned text on the canvas', a, b);
};

相关文章