HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
绘制图形的时候，我们可能经常会想到旋转图形，或者对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，就能实现这种效果。
在计算机上绘制图形的时候，是以坐标点为基准来进行绘制的，默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点，并以像素为单位来进行绘制的。
如果对这个坐标轴进行改变，那么就可以实现图形的变换处理了。对坐标的变换处理有以下三种方式：
平移
使用图形上下文对象的translate方法移动坐标轴原点，该方法定义如下：
x:表示横坐标，也就是将坐标轴x从原点向【左】移动多少个单位，默认以像素为单位
y:表示纵坐标，也就是将坐标轴y从原点向【下】移动多少个单位，默认以像素为单位
扩大
使用图形上下文对象的scale方法将图形放大，该方法的定义如下所示：
x:表示横坐标，也就是【水平方向】将图形放大的倍数
y:表示纵坐标，也就是【垂直方向】将图形放大的倍数
注：将图形缩小的时候，将这两个参数设置为0-1之间的小数就可以了，比如，0.5表示将图形缩小一半。
旋转
使用图形上下文对象的rotate方法将图形进行旋转，该方法的定义如下所示：
angle：是指旋转的角度，旋转的中心点是坐标轴的原点。旋转方向为顺时针进行，要想逆方旋转，只需要设置为负数即可。
下面的案例，就是使用这三种坐标变换方式共同实现的下图效果：
在计算机上绘制图形的时候，是以坐标点为基准来进行绘制的，默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点，并以像素为单位来进行绘制的。
如果对这个坐标轴进行改变，那么就可以实现图形的变换处理了。对坐标的变换处理有以下三种方式：
平移
使用图形上下文对象的translate方法移动坐标轴原点，该方法定义如下：
- cantext.translate(x, y);
x:表示横坐标，也就是将坐标轴x从原点向【左】移动多少个单位，默认以像素为单位
y:表示纵坐标，也就是将坐标轴y从原点向【下】移动多少个单位，默认以像素为单位
扩大
使用图形上下文对象的scale方法将图形放大，该方法的定义如下所示：
- cantext.scale(x, y);
x:表示横坐标，也就是【水平方向】将图形放大的倍数
y:表示纵坐标，也就是【垂直方向】将图形放大的倍数
注：将图形缩小的时候，将这两个参数设置为0-1之间的小数就可以了，比如，0.5表示将图形缩小一半。
旋转
使用图形上下文对象的rotate方法将图形进行旋转，该方法的定义如下所示：
- cantext.rotate(angle);
angle：是指旋转的角度，旋转的中心点是坐标轴的原点。旋转方向为顺时针进行，要想逆方旋转，只需要设置为负数即可。
下面的案例，就是使用这三种坐标变换方式共同实现的下图效果：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>HTML5每日一练之Canvas标签的应用-绘制坐标变换图形</title>
- <script type="text/javascript">
- window.onload = function()
- {
- var canvas = document.getElementById("W3Cfuns_canvas");
- var context = canvas.getContext("2d");
- context.fillStyle = "#d4d4d4";
- context.fillRect(0, 0, 400, 300);
- //绘制图形
- context.translate(200, 25);
- context.fillStyle = "rgba(0, 0, 255, 0.25)";
- for(var i = 0; i < 50; i++)
- {
- context.translate(25, 25);
- context.scale(0.95, 0.95);
- context.rotate(Math.PI / 10);
- context.fillRect(0, 0, 100, 50);
- }
- }
- </script>
- </head>
- <body>
- <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
- </body>
- </html>
【HTML5每日一练之Canvas标签的应用-绘制坐标变换图形】相关文章
1. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形
2. HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用
3. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
4. HTML5每日一练之Canvas标签的应用-绘制线性渐变图形
8. HTML5每日一练之Canvas标签的应用-绘制向日葵
9. HTML5每日一练之Canvas标签的应用-在页面上放置Canvas
本文来源：https://www.51html5.com/a614.html
﹝HTML5每日一练之Canvas标签的应用-绘制坐标变换图形﹞相关内容
- HTML5每日一练之progress标签的应用
- HTML5每日一练之视频标签的应用
- HTML5每日一练之figure新标签的应用
- HTML5每日一练之details展开收缩标签的应用
- HTML5每日一练之mark标签的应用
- HTML5每日一练之meter标签的应用
- Html5 Canvas 变换矩阵与坐标变形之间的关系
- HTML5每日一练之FileList文件列表对象的应用
- HTML5每日一练之datalist标签自动补全的使用
- HTML5每日一练之OL列表的改良