这里首先演示下位移，这里使用的函数是translate(x, y)这个函数是叠加的，也就是说，当translate(100, 100)，后再次调用translate(200, 200)，那么最后圆点的基准值就为translate(300, 300)。 也就是说如果要实现某个图形的位移后，还要变回来。 代码如下： 或者使用如下的方式： 程序运行截图如下： 代码如下： 使用save()及restore() 程序运行截图如下： 源码如下： 下面是关于scale，这里scale会把坐标，线条边框都扩大了，如下图： 源码如下： 下面是关于变换矩阵transform。 这里有个基本概念：二维图像变换矩阵为3*3，三维图像变换矩阵为 4*4 关于二维图像变换矩阵为： [ a c e b d f 0 0 1 ] a表示水平缩放，默认值为1； b表示水平倾斜，默认值为0； c表示垂直倾斜，默认值为0； d表示垂直缩放，默认值为1； e表示水平位移，默认值为0； f表示垂直位移，默认值为0。 从中可知，默认情况下变换矩阵为单位矩阵 [ 1 0 0 0 1 0 0 0 1 ] 如下使用单位矩阵变换的例子： 源码如下： 下面开始进行变换，程序运行截图如下： 源码如下： 同样这给transform也是叠加的，使用setTransform是把之前的变换都设置为单位矩阵，然后再进行缩放。
translate(100, 100); //TODO ... ... translate(-100, -100);
save(); //保存当前图形状态 Restore(); //返回save前的状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"> 当前浏览器不支持canvas </canvas> <script> window.onload = function(){ let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(0, 0, 400, 400); context.fillStyle = "blue"; context.translate(100, 100); context.fillRect(0, 0, 400, 400); context.fillStyle = "green"; context.translate(300, 300); context.fillRect(0, 0, 400, 400); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"> 当前浏览器不支持canvas </canvas> <script> window.onload = function(){ let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(0, 0, 400, 400); context.save(); context.fillStyle = "blue"; context.translate(100, 100); context.fillRect(0, 0, 400, 400); context.restore(); context.save(); context.fillStyle = "green"; context.translate(300, 300); context.fillRect(0, 0, 400, 400); context.restore(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"> 当前浏览器不支持canvas </canvas> <script> window.onload = function(){ let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.save(); context.scale(1, 1); context.strokeRect(50, 50, 200, 200); context.restore(); context.save(); context.scale(2, 2); context.strokeRect(50, 50, 200, 200); context.restore(); context.save(); context.scale(3, 3); context.strokeRect(50, 50, 200, 200); context.restore(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"> 当前浏览器不支持canvas </canvas> <script> window.onload = function(){ let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "#058"; context.lineWidth = 5; context.save(); context.transform(1, 0, 0, 1, 0, 0); context.fillRect(50, 50, 300, 300); context.strokeRect(50, 50, 300, 300); context.restore(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"> 当前浏览器不支持canvas </canvas> <script> window.onload = function(){ let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "#058"; context.lineWidth = 5; context.save(); context.transform(1, 1, 0, 1, 0, 0); context.fillRect(50, 50, 300, 300); context.strokeRect(50, 50, 300, 300); context.restore(); } </script> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
780