HTML5 canvas提供了 scale(x,y)方法,该方法用于增加或减少画布网格中的单位,这可用于绘制按比例缩小或放大的形状和位图。
该方法采用两个参数,其中x是水平方向的比例因子,y是垂直方向的比例因子。两个参数都必须为正数。
小于1.0的值将减小单位大小,而大于1.0的值将增大单位大小。将比例因子精确设置为1.0不会影响单位大小。
链接:https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-scaling.html
来源:LearnFk无涯教程网
以下是一个简单的例子,该例子使用呼吸描记器功能绘制具有不同缩放比例的九种形状。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function drawShape() { //使用 DOM 获取画布元素 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(); //非均匀缩放(y 方向) 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(); //非均匀缩放(x 方向) 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(); } </script> </head> <body onload="drawShape();"> <canvas id="mycanvas" width="400" height="400"></canvas> </body> </html>
上面的例子将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)