调整大小时 html5 画布重绘 [英] html5 canvas redraw on resize

问题描述

我有两个画布元素，需要在单击按钮时调整它们的大小.

<div id="canvasDiv" style="width: 310px;"><canvas id="canvasGraph"></canvas></div></div><div class="kDetails"><div><div><div id="canvasDiv" style="width: 310px; height: 240px;"><canvas id="canvasGraph"></canvas></div></div>

和脚本:

 var Sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null;函数 drawCanvas(div) {canvas = document.querySelector(div + " #canvasGraph");ctx = canvas.getContext('2d');草图 = document.querySelector(div + " #canvasDiv");草图_sl = getComputedStyle(草图)；canvas.width = parseInt(sketch_style.getPropertyValue('width'));canvas.height = parseInt(sketch_style.getPropertyValue('height'));tmp_canvas = document.createElement('canvas');tmp_ctx = tmp_canvas.getContext('2d');tmp_canvas.id = 'tmp_canvas';tmp_canvas.width = canvas.width;tmp_canvas.height = canvas.height;Sketch.appendChild(tmp_canvas);

重绘功能:

//在这里我必须重绘我的线调整大小 2 次 ( *cScale ) 其中 cScale=2 或 =1函数 drawScales(ctx, canvas)ctx.strokeStyle = '绿色';ctx.fillStyle = '绿色';ctx.beginPath();ctx.moveTo(5, 0);ctx.lineTo(0, canvas.height);scaleStep = 24*cScale;

出于某种原因，它的效果非常糟糕，旧职位仍然存在.有没有办法完全删除整个画布并附加它或完全重绘它?

我试过 canvas.width=canvas.width，试过 ctx.clearRect(0, 0, canvas.width, canvas.height);tmp_ctx.clearRect(0, 0, canvas.width, canvas.height);, 试过 $(".sDetails #canvasGraph")[0].reset();

逻辑上，drawCanvas(".sDetails");drawLines(ctx, canvas); 应该从头开始重绘，但不会.

解决方案

我决定使用一个比例变量来调整我的比例.我调整画布的大小 canvas.width *= 2; 然后我重新绘制我的比例.

var scaleStep;

并使用将其添加到代码中:ctx.lineTo(12*24*cScale+12, canvas.height-24); 需要进行缩放的地方.最大化画布时 scaleStep 为 2，返回原始大小时为 1.

I have two canvas elements and need them to be resized on buttons click.

<div class="sDetails"><div>
                        <div id="canvasDiv" style="width: 310px;"><canvas id="canvasGraph"></canvas></div></div>
<div class="kDetails"><div><div>
<div id="canvasDiv" style="width: 310px; height: 240px;"><canvas id="canvasGraph"></canvas></div></div>

and the script:

   var sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null;
    function drawCanvas(div) {
        canvas = document.querySelector(div + " #canvasGraph");
        ctx = canvas.getContext('2d');
        sketch = document.querySelector(div + " #canvasDiv");
        sketch_sl = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));
        tmp_canvas = document.createElement('canvas');
        tmp_ctx = tmp_canvas.getContext('2d');
        tmp_canvas.id = 'tmp_canvas';
        tmp_canvas.width = canvas.width;
        tmp_canvas.height = canvas.height;
        sketch.appendChild(tmp_canvas);

the redraw function:

// here I must redraw my lines resized 2 times ( *cScale ) where cScale=2 or =1
function drawScales(ctx, canvas) 
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        ctx.beginPath();
        ctx.moveTo(5, 0);
        ctx.lineTo(0, canvas.height);
        scaleStep = 24*cScale;

for some reason it works really bad, old positions stay. Is there a way to completely delete the whole canvas and append it or redraw it completely?

I tried canvas.width=canvas.width, tried ctx.clearRect(0, 0, canvas.width, canvas.height);tmp_ctx.clearRect(0, 0, canvas.width, canvas.height);, tried $(".sDetails #canvasGraph")[0].reset();

logically, drawCanvas(".sDetails");drawLines(ctx, canvas); should redraw it from scratch but it will not.

解决方案

I decided to use a scale variable to resize my scales. I resize the canvas canvas.width *= 2; and then I redraw my scales.

var scaleStep;

and use add it into the code: ctx.lineTo(12*24*cScale+12, canvas.height-24); where the scaling needs to be done. The scaleStep is 2 when maximizing the canvas and 1 when returning to the original size.

这篇关于调整大小时 html5 画布重绘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！