《JS原理、方法与实践》- canvas作图(七)- 缩放

简介: 《JS原理、方法与实践》- canvas作图(七)- 缩放

方法: scale(x, y)

坐标系除了可以移动和旋转外还可以进行缩放,缩放使用的是scale方法,它有两个参数,分别标识横轴和纵轴缩放的比例, 1为原始大小,大于1为放大,小于1为缩小。

示例:

```html

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

</head>

<body>

   <canvas id="c2d" height="600" width="600">浏览器不支持canvas</canvas>

   <script>

       const canvas = document.querySelector('#c2d');

       if(canvas.getContext) {

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

         

           ctx.fillText('爱我中华', 10, 50);

           ctx.scale(2,2);

           ctx.translate(50,50);

           ctx.fillText('爱我中华', 10, 50);

       }

   </script>

</body>

</html>

```

![](https://upload-images.jianshu.io/upload_images/2789632-73e0e9e41c36fd13.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

同样是填充一个文本,由于第二次填充文字时,x轴和y轴都同比增加了2倍,所以文字的大小也相应的增加。

目录
相关文章
|
22天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
18 2
JavaScript基础知识-方法
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
15 1
JavaScript基础知识-数组的常用方法
|
2天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
22天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
22天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
1天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
|
1天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
2天前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
|
2天前
|
JavaScript
JS数组合并的常用方法
JS数组合并的常用方法