实例说明:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程</title> </head> <body> <canvas id="myCanvas" width="150" height="70" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15); </script> </body> </html>
标签含义:
scale元素为缩放当前绘图至更大或更小
注意:如果您对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置
scalewidth 缩放当前绘图的宽度(1=100%,0.5=50%,2=200%,依次类推)
scaleheight 缩放当前绘图的高度(1=100%,0.5=50%,2=200%,依次类推)
源代码运行结果如下:
相关文章
标签:html