文章目录

一.保存与恢复
二.平移( translate )
- 1.用法
- 2.源码
- 3.图形解释
- 4.总结
- 5.不正确的做法
三.旋转( rotate )
- 1.用法
- 2.源码
- 3.效果图
四.缩放( scale )
- 1.知识点
- 2.源码
- 3.效果图
五.变形的综合写法
- 1.用法
- 2.源码
- 3.效果图
篇章

一.保存与恢复

var ctx = canvas.getContext("2d");

canvas是可以进行变形的，但是，变形的不是元素，而是整个画布的渲染区域(ctx)。

我们需要在画布变形前进行保存【 save() 】和恢复【 restore() 】，这两种方法都没有参数。

save()：保存画布的所有状态。

restore()：恢复canvas的状态，相当于重新加载之前保存的的状态。

代码截图：

变形的参考网址：

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations

二.平移( translate )

1.用法

ctx.translate(x,y);

平移的是坐标值。

2.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>平移</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 游戏类function draw() {var dom = document.querySelector("canvas");var ctx = dom.getContext("2d");// 保存ctx.save();ctx.translate(50,50); //平移 ctx.fillRect(0,0,120,120);// 恢复ctx.restore();// 渲染位置是没有保存之前的位置ctx.fillRect(0,220,120,120);};draw();
</script>

3.图形解释

4.总结

如果我们的变形操作多了，画布就会变得不可控。例如，我们想平移很多次，如果没有保存和恢复，就无法精确到平移的值，这就是不可控的因素。

所以，我们如果想要避免不可控的因素，就可以利用规律：变形之前先备份，相当于将原来的状态备份再变形，变形完毕后再恢复到原来的状态。

5.不正确的做法

不正确的做法：没有保存与恢复。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>平移的错误做法</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 游戏类function draw() {var dom = document.querySelector("canvas");var ctx = dom.getContext("2d");ctx.translate(50,50);ctx.fillRect(0,0,120,120);ctx.fillRect(120,220,120,120);};draw();
</script>

图形解释

总结：

通过截图与代码的对比，第二次的渲染位置与预期的不一样。

我们预期的第二次渲染的位置是120，由于第一次的变形操作，位置变成了120+50=170

三.旋转( rotate )

1.用法

 ctx.rotate(deg);

旋转的参数是以弧度为单位的值，代表旋转角度。

2.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 游戏类var deg = 0;  //定义全局变量function draw() {var dom = document.querySelector("canvas");var ctx = dom.getContext("2d");deg += 0.1;  // 保存ctx.save();ctx.translate(150,150); //平移ctx.rotate(deg);  //旋转   ctx.fillRect(0,0,120,120);// 恢复ctx.restore();};draw();
</script>

3.效果图

四.缩放( scale )

1.知识点

canvas中的scale是有两个参数的，分别代表了x( 宽度*参数x )，y( 高度*参数y ) ，都必须是正数。1为正常比例，大于1代表放大，小于1代表缩小。

2.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>缩放</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 游戏类function draw() {var dom = document.querySelector("canvas");var ctx = dom.getContext("2d");// 保存ctx.save();ctx.translate(150,100); //平移ctx.scale(0.5,0.5);   //缩放ctx.fillRect(0,0,120,120);// 恢复ctx.restore();// 渲染位置是没有保存之前的位置ctx.fillRect(0,100,120,120);};draw();
</script>

3.效果图

五.变形的综合写法

1.用法

2.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变形之综合写法</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 游戏类function draw() {var dom = document.querySelector("canvas");var ctx = dom.getContext("2d");// 保存ctx.save();ctx.transform(0.5,1.1,1.1,0.5,100,100);ctx.fillRect(0,0,120,120);// 恢复ctx.restore();};draw();
</script>

3.效果图

篇章

上一篇：canvas教程14-资源管理器

下一篇：canvas教程16-滚动的车轮

canvas教程15-变形相关推荐

canvas mdn_MDN文档 canvas教程笔记
MDN Canvas教程 API CanvasRenderingContext2D即canvas.getContext('2d')返回的对象类型,几乎所有作图操作基于这个"上下文对象&q ...
[译][Tkinter 教程15] event 事件绑定
已获原作者授权. 原系列地址: Python Tkinter 简介一个 Tkinter 应用生命周期中的大部分时间都处在一个消息循环 (event loop) 中. 它等待事件的发生: 事件可能是 ...
canvas教程1-canvas的基本使用
文章目录一.canvas的简介二.源码三.效果图四.知识点总结篇章一.canvas的简介一直以来,web上的动画都是flash实现的,例如,广告.游戏等. flash是有缺点的,例如我们 ...
canvas教程11-渐变
文章目录一.渐变 1.线型渐变 2.径向渐变二.源码 1.线型渐变 2.径向渐变三.效果图 1.线型渐变 2.径向渐变篇章一.渐变渐变有两种方式,一种是线型渐变,一种是径向渐变. 1.线型 ...
OpenCV-Python 中文教程15——OpenCV 中的轮廓
OpenCV-Python 中文教程15--OpenCV 中的轮廓一.初识轮廓目标 • 理解什么是轮廓 • 学习找轮廓,绘制轮廓等 • 函数: cv2.findContours(), cv2.dr ...
[SQL基础教程] 1-5 表的删除和更新
[SQL基础教程] 1-5 表的删除和更新表的删除语法 DROP TABLE <表名>; 法则 1-12 删除的表无法恢复表定义的更新语法 ALTER TABLE<表名> ...
STM32 电机教程 15 - BLDC 速度环内嵌电流环
前言无刷直流 (Brushless Direct Current, BLDC)电机是一种正快速普及的电机类型,它可在家用电器.汽车.航空航天.消费品.医疗.工业自动化设备和仪器等行业中使用.正如名称 ...
STM32 进阶教程 15 - 串口DMA收发
前言串口操作相信大家一定很熟悉,如果你已经会串口的收发数据,并可以灵活使用轮询及中断方式对串口进行数据收发,那么恭喜你,学完本节内容后,也将可以学会串口的更高级操作方式,DMA方式,DMA操作串口可 ...
STM32 基础系列教程 15 - SPI
前言学习stm32 SPI通信接口使用,学会用SPI接口收发数据. 示例详解基于硬件平台: STM32F10C8T6最小系统板, MCU 的型号是 STM32F103c8t6, 使用stm32cu ...
java在线音乐播放器课程_[Java教程]15款最好的网站音乐播放器
[Java教程]15款最好的网站音乐播放器 0 2014-10-27 17:02:55 在互联网上有很多的脚本和插件,可以很容易将音乐播放功能集成到网站,以下是15款最好的网站音乐播放器. Flash ...

canvas教程15-变形

文章目录

一.保存与恢复

二.平移( translate )

1.用法

2.源码

3.图形解释

4.总结

5.不正确的做法

三.旋转( rotate )

1.用法

2.源码

3.效果图

四.缩放( scale )

1.知识点

2.源码

3.效果图

五.变形的综合写法

1.用法

2.源码

3.效果图

篇章

canvas教程15-变形相关推荐

最新文章

热门文章