canvas 有几个变形形式：移动、旋转、缩放、变形。在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。

1、移动 Translate

translate用来移动 canvas 和它的原点到一个不同的位置。
translate(x, y) translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量。

看个例子

这个例子显示了一些移动 canvas 原点的好处。我创建了一个 drawSpirograph 方法用来绘制螺旋（spirograph）图案，那是围绕原点绘制出来的。如果不使用 translate 方法，那么只能看见其中的四分之一。translate 同时让我可以任意放置这些图案，而不需要在 spirograph 方法中手工调整坐标值，既好理解也方便使用。

我在 draw 方法中调用 drawSpirograph 方法 9 次，用了 2 层循环。每一次循环，先移动 canvas ，画螺旋图案，然后恢复早原始状态。

<canvas id="canvas" width=400 height=400></canvas>
<script type="text/javascript">function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.fillRect(0,0,300,300);for (var i=0;i<3;i++) {for (var j=0;j<3;j++) {ctx.save();ctx.strokeStyle = "#9CFF00";ctx.translate(50+j*100,50+i*100);drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);ctx.restore();}}}function drawSpirograph(ctx,R,r,O){var x1 = R-O;var y1 = 0;var i    = 1;ctx.beginPath();ctx.moveTo(x1,y1);do {if (i>20000) break;var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))ctx.lineTo(x2,y2);x1 = x2;y1 = y2;i++;} while (x2 != R-O && y2 != 0 );ctx.stroke();}draw();
</script>

！！！表示不明白drawSpirograph里是怎样实现的，数学没学好。

2、旋转 Rotating

rotate 方法，它用于以原点为中心旋转 canvas。

rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。

看个例子

<canvas id="canvas" width=400 height=400></canvas>
<script type="text/javascript">function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.translate(75,75);  //移动远点到(75,75)处for (var i=1;i<6;i++){ //里往外画5圈圆ctx.save(); //先保存状态ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; //圆的颜色//下面实现效果是：通过旋转画板，在x轴上画圆。这样的好处是方便计算，所有圆在x轴上实现，通过旋转画板来画所有圆。for (var j=0;j<i*6;j++){ctx.rotate(Math.PI*2/(i*6)); //顺时针旋转Math.PI*2/(i*6)度ctx.beginPath();ctx.arc(0,i*12.5,5,0,Math.PI*2,true); //在(0,12.5*i)处画圆，半径为5px，画360度。ctx.fill();}ctx.restore(); //还原到保存前的状态}}draw();
</script>

3、缩放 Scaling

scaling 用来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。
scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

4、变形 Transforms

transforms 直接对变形矩阵作修改。

transform(m11, m12, m21, m22, dx, dy) 这个方法必须将当前的变形矩阵乘上下面的矩阵：

m11 m21 dx
m12 m22 dy
0   0   1

这个方法必须重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。

看个例子

    <canvas id="canvas" width=400 height=400></canvas><script type="text/javascript">function draw() {var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var sin = Math.sin(Math.PI/6);var cos = Math.cos(Math.PI/6);ctx.translate(100, 100);var c = 0;for (var i=0; i <= 12; i++) {c = Math.floor(255 / 12 * i);ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";ctx.fillRect(0, 0, 100, 10);ctx.transform(cos, sin, -sin, cos, 0, 0);}}draw();</script>

transform 没看明白，有待研究。

参考文献：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations

canvas 变形记——移动、旋转、缩放、变形相关推荐

04 canvas——位移画布和旋转缩放
4.1 缩放 scale() 方法缩放当前绘图,更大或更小语法:context.scale(scalewidth,scaleheight) scalewidth : 缩放当前绘图的宽度 (1=100 ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
20P75 pr预设模板840种扭曲缩放平移变形切割光效旋转无缝视频转场
20P75 pr预设模板840种扭曲缩放平移变形切割光效旋转无缝视频转场模版信息: 适用软件:Premiere Pro CC 2018.1.2 或更高版本分辨率:4K (3840×2160), ( ...
html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动
1 transform属性在CSS3中,能够利用transform性能实现文字或图像的旋转.缩放.歪斜.挪动这4中类型的变形解决. (1)浏览器反对到目前为止:Safari3.1以上.Chrome ...
狗狗变形记：任选4点的投影变换warpPerspective OpenCV-Python案例
☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython ░ 要理解投影变换的原理最好能理解仿射变换的原理,关于仿射变换可参考老猿的仿射变换相关系列博文 ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
计算机课图画的变形教案,电子工业版（内蒙古）信息技术四上第10课《图画变形记》教案1.doc...
电子工业版(内蒙古)信息技术四上第10课<图画变形记>教案1.doc 文档编号:537263 文档页数:6 上传时间: 2019-01-13 文档级别: 文档类型:doc 文档大小:219 ...
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
注: 苹果手机升级IOS14.1系统后,出现图片写入不了CANVAS画布问题解决方法:alloy_paper.js 文件查找代码: this.img.crossOrigin = "Anon ...
房企“变形记”，好戏还远
"没有保利地产,就没有保利发展."2018年9月13日晚,广州琶洲保利洲际酒店,更名后的保利发展(600048.SH)董事长宋广菊如是说. 这原本是一场告别会:沿用26年,承载很多 ...

canvas 变形记——移动、旋转、缩放、变形

1、移动 Translate

2、旋转 Rotating

3、缩放 Scaling

4、变形 Transforms

canvas 变形记——移动、旋转、缩放、变形相关推荐

最新文章

热门文章