《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倍,所以文字的大小也相应的增加。

目录
相关文章
|
16天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
130 59
|
11天前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
本文介绍了一个使用JavaScript和HTML5 Canvas API实现的贪吃蛇游戏的升级版本,该版本支持PC端和移动端,提供了丝滑的转向效果,并允许玩家通过键盘或触摸屏控制蛇的移动。代码中包含了详细的注释,解释了游戏逻辑、食物生成、得分机制以及如何响应不同的输入设备。
26 1
JS配合canvas实现贪吃蛇小游戏_升级_丝滑版本_支持PC端和移动端
|
9天前
|
移动开发 前端开发 JavaScript
js之Canvas|2-1
js之Canvas|2-1
|
10天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
25 2
|
12天前
|
前端开发 JavaScript Java
JavaScript的运行原理
JavaScript 的运行原理包括代码输入、解析、编译、执行、内存管理和与浏览器交互几个步骤。当打开网页时,浏览器加载 HTML、CSS 和 JavaScript 文件,并通过 JavaScript 引擎将其解析为抽象语法树(AST)。接着,引擎将 AST 编译成字节码或机器码,并在执行阶段利用事件循环机制处理异步操作,确保单线程的 JavaScript 能够高效运行。同时,JavaScript 引擎还负责内存管理和垃圾回收,以减少内存泄漏。通过与 DOM 的交互,JavaScript 实现了动态网页效果,提供了灵活且高效的开发体验。
|
11天前
|
移动开发 前端开发 JavaScript
JS配合canvas实现贪吃蛇小游戏
本文通过详细的代码示例介绍了如何使用JavaScript和HTML5的Canvas API实现一个贪吃蛇游戏,包括蛇的移动、食物的生成、游戏的开始与结束逻辑,以及如何响应键盘事件来控制蛇的方向。
25 1
|
11天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
10 0
JS之concat方法
|
11天前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
13 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
16天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
17天前
|
JavaScript
JS数组合并的常用方法
JS数组合并的常用方法