html5 canvas重新调整大小

CodeGust 发表于 Dev

CodeGust

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

<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>

和脚本：

   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);

重绘功能：

// 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;

由于某种原因，它的工作真的很糟糕，旧职位仍然存在。有没有办法完全删除整个画布并附加或完全重画？

我尝试过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);应从头开始重绘，但不会。

CodeGust

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

var scaleStep;

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。