《JS原理、方法与实践》- canvas作图(六)- 坐标操作

简介: 《JS原理、方法与实践》- canvas作图(六)- 坐标操作

#### 移动坐标原点

方法:translate(x,y):x,y代表移动后x,y坐标

#### 旋转坐标系

方法:rotate(angle), 旋转角度,整数为逆时针,负数为顺时针。

实例

```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" width="500" height="500">不支持canvas</canvas>

   <script>

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

       if(canvas.getContext) {

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

           ctx.fillRect(0,0,10,30);

           ctx.translate(10,30);

           ctx.fillRect(0,0,10,30);

           ctx.translate(10,30);

           ctx.rotate(-Math.PI * 1/2);

           ctx.fillStyle='red';

           ctx.fillRect(0,0,10,30);

       }

   </script>

</body>

</html>

```

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

目录
相关文章
|
3天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
3天前
|
JavaScript 前端开发
在JavaScript中实现模块化开发有多种方法
JavaScript模块化开发可通过CommonJS、AMD和ES6模块实现。CommonJS适用于服务器端,使用`require`和`module.exports`处理模块;AMD(如RequireJS)用于浏览器端,依赖`require`和`define`;ES6模块提供原生支持,使用`import`和`export`。选择方式需考虑项目环境、复杂度和技术栈。
10 4
|
3天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
4天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
4天前
|
前端开发 JavaScript
JS长按保存canvas绘图
JS长按保存canvas绘图
7 0
|
4天前
|
JavaScript 前端开发
JS tostring()和join()方法
JS tostring()和join()方法
7 1
|
4天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
7 0
|
5天前
|
JavaScript 前端开发 索引
js添加、删除、替换、插入元素的方法
js添加、删除、替换、插入元素的方法
10 0
|
6天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
18 1