问题描述
我有两个canvas元素,需要在按钮上调整大小。
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>
和脚本:
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;
由于某种原因它工作真的很糟糕,旧职位留下。
有没有办法完全删除整个画布并添加或完全重绘?
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?
我试过 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);
应该从头重新绘制,但不会。
logically, drawCanvas(".sDetails");drawLines(ctx, canvas);
should redraw it from scratch but it will not.
推荐答案
我决定使用一个scale变量来调整我的scale。我调整画布 canvas.width * = 2;
,然后我重新绘制我的尺度。
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;
代码: ctx.lineTo(12 * 24 * cScale + 12,canvas.height-24);
其中需要进行缩放。
scaleStep在最大化画布时为2,在返回原始大小时为1。
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 canvas重绘大小调整的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!