html 画布 重置,javascript – 调整大小时的html5画布重绘

调整画布元素的宽度和宽度.高度并使用context.scale以新缩放的大小重绘原始图形.

>调整画布元素的大小将自动清除画布上的所有绘图.

>调整大小还会自动将所有上下文属性重置为其默认值.

>使用context.scale很有用,因为画布会自动重新缩放原始图形以适合新尺寸的画布.

>重要说明：画布不会自动重绘原始图纸……您必须重新发出原始图纸命令.

与2幅画布相同尺寸的插图(其尺寸由范围控制控制)

左画布的插图调整大小

右画布的插图调整得更大

这是示例代码和演示.此演示使用范围元素来控制调整大小,但您也可以在window.onresize中重新调整大小

var canvas1=document.getElementById("canvas1");

var ctx1=canvas1.getContext("2d");

var canvas2=document.getElementById("canvas2");

var ctx2=canvas2.getContext("2d");

var originalWidth=canvas1.width;

var originalHeight=canvas1.height;

var scale1=1;

var scale2=1;

$myslider1=$('#myslider1');

$myslider1.attr({min:50,max:200}).val(100);

$myslider1.on('input change',function(){

var scale=parseInt($(this).val())/100;

scale1=scale;

redraw(ctx1,scale);

});

$myslider2=$('#myslider2');

$myslider2.attr({min:50,max:200}).val(100);

$myslider2.on('input change',function(){

var scale=parseInt($(this).val())/100;

scale2=scale;

redraw(ctx2,scale);

});

draw(ctx1);

draw(ctx2);

function redraw(ctx,scale){

// Resizing the canvas will clear all drawings off the canvas

// Resizing will also automatically clear the context

// of all its current values and set default context values

ctx.canvas.width=originalWidth*scale;

ctx.canvas.height=originalHeight*scale;

// context.scale will scale the original drawings to fit on

// the newly resized canvas

ctx.scale(scale,scale);

draw(ctx);

// always clean up! Reverse the scale

ctx.scale(-scale,-scale);

}

function draw(ctx){

// note: context.scale causes canvas to do all the rescaling

// math for us, so we can always just draw using the

// original sizes and x,y coordinates

ctx.beginPath();

ctx.moveTo(150,50);

ctx.lineTo(250,150);

ctx.lineTo(50,150);

ctx.closePath();

ctx.stroke();

ctx.fillStyle='skyblue';

ctx.beginPath();

ctx.arc(150,50,20,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.arc(250,150,20,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.stroke();

ctx.beginPath();;

ctx.arc(50,150,20,0,Math.PI*2);

ctx.fill();

ctx.stroke();

}

$("#canvas1, #canvas2").mousemove(function(e){handleMouseMove(e);});

var $mouse=$('#mouse');

function handleMouseMove(e){

// tell the browser we're handling this event

e.preventDefault();

e.stopPropagation();

var bb=e.target.getBoundingClientRect();

mouseX=parseInt(e.clientX-bb.left);

mouseY=parseInt(e.clientY-bb.top);

if(e.target.id=='canvas1'){

$mouse.text('Mouse1: '+mouseX/scale1+' / '+mouseY/scale1+' (scale:'+scale1+')');

}else{

$mouse.text('Mouse2: '+mouseX/scale2+' / '+mouseY/scale2+' (scale:'+scale2+')');

}

}

body{ background-color: ivory; }

canvas{border:1px solid red;}

Resize left canvas

Resize right canvas

Mouse coordinates: