html增加减少,在HTML5 Canvas网格中增加或减少单位

HTML5 canvas提供了scale(x,y)方法，该方法用于增加或减少画布网格中的单位。这可用于绘制按比例缩小或放大的形状和位图。

此方法采用两个参数，其中x是水平方向的比例因子，y是垂直方向的比例因子。两个参数都必须为正数。

示例

让我们看一个例子-HTML>

function drawShape(){

//使用DOM获取canvas元素

var canvas = document.getElementById('mycanvas');

if (canvas.getContext){

//使用getContext将画布用于绘制

var ctx = canvas.getContext('2d');

ctx.strokeStyle = "#fc0";

ctx.lineWidth = 1.5;

ctx.fillRect(0,0,300,300);

//均匀缩放

ctx.save()

ctx.translate(50,50);

drawSpirograph(ctx,22,6,5);

ctx.translate(100,0);

ctx.scale(0.75,0.75);

drawSpirograph(ctx,22,6,5);

ctx.translate(133.333,0);

ctx.scale(0.75,0.75);

drawSpirograph(ctx,22,6,5);

ctx.restore();

ctx.strokeStyle = "#0cf";

ctx.save()

ctx.translate(50,150);

ctx.scale(1,0.75);

drawSpirograph(ctx,22,6,5);

ctx.translate(100,0);

ctx.scale(1,0.75);

drawSpirograph(ctx,22,6,5);

ctx.translate(100,0);

ctx.scale(1,0.75);

drawSpirograph(ctx,22,6,5);

ctx.restore();

ctx.strokeStyle = "#cf0";

ctx.save()

ctx.translate(50,250);

ctx.scale(0.75,1);

drawSpirograph(ctx,22,6,5);

ctx.translate(133.333,0);

ctx.scale(0.75,1);

drawSpirograph(ctx,22,6,5);

ctx.translate(177.777,0);

ctx.scale(0.75,1);

drawSpirograph(ctx,22,6,5);

ctx.restore();

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

}

}

function drawSpirograph(ctx,R,r,O){

var x1 = R-O;

var y1 = 0;

var i = 1;

ctx.beginPath();

ctx.moveTo(x1,y1);

do {

if (i>20000) break;

var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))

var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))

ctx.lineTo(x2,y2);

x1 = x2;

y1 = y2;

i++;

}

while (x2 != R-O && y2 != 0 );

ctx.stroke();

}