Canvas的缩放操作（十二）

缩放就是放大或减小。

缩放函数
context.scale(x,y)
参数x，y表示移动的x轴和y轴上的缩放比例，切记是轴变大

先来看代码：

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canvas高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");
      
      context.scale(2,2); //x，y均放大2倍
      context.fillRect(100,100,100,100); //相当于（200,200）处画一个宽高均为200的矩形
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

效果图

Canvas的缩放操作（十二）

上面的效果图我们可以看到，因为轴发生放大，所以矩形位置原点从（100，100）变大2倍到了在（200,200），但宽、高均为100的2倍即200；
注意，这里的缩放也是对Canvas所有元素的，以及接下来的所有的操作，那岂不是很麻烦？？！这个时候想起了上次我们提到的Canvas的状态保存功能，什么意思呢？？
往下面看！！！

绘画代码如下：

context.save();  //保存初始状态
context.translate(150,150);  //画布平移，原点平移
context.scale(2,2);
context.fillRect(0,0,100,100);  //平移并放大（注意原点放大还是原点位置

效果图

Canvas的缩放操作（十二）

绘画代码如下：

context.save();  //保存初始状态
context.translate(150,150);  //画布平移，原点平移
context.scale(2,2);
context.fillRect(0,0,100,100);

context.restore();//恢复初始状态
context.fillRect(0,0,100,100); //初始状态绘画

效果图

Canvas的缩放操作（十二）