HTML5 canvas transform与矩阵

首先,我们看一下w3school上的例子:

Javascript语法:context.transform( a , b , c , d , e , f );

定义与用法:画布上的每个对象都拥有一个当前的变换矩阵。而transform则是用来定义一个新的矩阵,来替换原来的变换矩阵。

六个参数,对应的矩阵就是:

在这里,我说一下变换矩阵要用到的关于矩阵的知识,一个图形,在画布上无非是移动,缩小放大,还有旋转,斜切,等等。

PS告诉我们,无论多复杂的图形,都是由一个个点组成的,变换矩阵要做的,无非是应用一定的算法,把一个图形上的一个点,映射到另一个点上。

那么,我们就可以得出以下公式:

根据中间那个矩阵的不同,我们就可以得到不同的变换效果。

矩阵乘法是这样定义的:假设有两个矩阵A和B,如果要通过A*B得到C,那么矩阵A的列数必须与矩阵B的行数相同,方才能进行运算。得到的新的矩阵的第 i 行 ,第 j 列的值 就是A的第 i 行 与 B 的第 j 列相对应的值相乘,然后相加的结果。

首先,我们来看看图形在画布上的移动。

算法很简单:

X’ = X + a

Y’ = Y + b

这样就把点(X,Y)移动到了(X’,Y’)。

对应的变换的矩阵就是

X’    1  0  a      X

Y’    0  1  b  *   Y

1    0  0  1      1

X’ = 1*X + 0*Y + a*1;

Y’ = 0*X + 1*Y + b*1;

1 = 0*X + 0*Y + 1*1;

那么,对应的JS代码就是context.transform(1,0,0,1,a,b);

再看缩小放大,算法也很简单:

X’ = X*a;

Y’ = Y*b;

Canvas是按照一定的算法来画图的,也就是说,Canvas画出来的图都是矢量图,不会因为放大与缩小而失真,那么,Canvas是如何实现放大与缩小的呢?

其实,无非是对X轴,Y轴乘以各相对应的缩放因子,然后进行路径的描写,填充。

对应的变换矩阵就是:

X’      a    0    0      X

Y’      0    b    0      Y

1      0    0    1      1

X’ = 1*X + 0 * Y + 0*1;

Y’ = 0*X + b*Y + 0*1;

1 = 0*X + 0*Y + 1*1;

对应的JS代码就是 context.transform(a,0,0,b,0,0);

再看看旋转,算法

通过图可以看出来,B点是通过把A点旋转θ度得来的,即

X’ = cos(a +θ) * r

Y’ = sin(a +θ) * r

根据三角函数公式:cos(α+β)=cosαcosβ-sinαsinβ

可得 X’ = r*cosa*cosθ–r* sina * sinθ=  X * cosθ – Y * sinθ;

同理可得 Y’ =  x*sinθ+y*cosθ;

X’      cosθ    -sinθ   0      X

Y’      sinθ    cosθ    0      Y

1        0       0     1      1

对应的JS代码就是 context.transform(Math.cos(θ * Math.PI/180) , Math.sin(θ*Math.PI/180) , - Math.sin(θ*Math.PI/180) , Math.cos(θ * Math.PI/180) , 0 , 0 );

矩阵的好处就是用6个参数就可以表达出不同的算法来,虽然麻烦了点,但这样做是值得的。

以此类推,斜切也是一样的,只是算法要复杂一些。

记住,在canvas中先确定坐标系,再画图,其实,平移,放大缩小,斜切,旋转,都是针对坐标系的,应用不同的坐标系,就可以画出不同的图形来。

时间: 2024-10-11 10:33:33

HTML5 canvas transform与矩阵的相关文章

Html5 Canvas transform setTransform

Html5 Canvas transform就是矩阵变换,一种坐标的变形. 坐标变形的三种方式,平移translate, 缩放scale以及旋转rotate都可以通过transform做到. transform(m11, m12, m21, m22, dx, dy):这个方法必须将当前的变形矩阵乘上下面的矩阵: m11 m21 dx m12 m22 dy 0 0 1 也就是说假设 变化前A(x,y)得到 变换后B(x’,y’)可以通过乘以上述矩阵即可得到: 比如说:缩放scale x”=x*a;

css3 matrix 2D矩阵和canvas transform 2D矩阵

一看到“2D矩阵”这个高大上的名词,有的同学可能会有种畏惧感,“矩阵”,看起来好高深的样子,我还是看点简单的吧.其实本文就很简单,你只需要有一点点css3 transform的基础就好. 没有前戏,直奔主题 2D矩阵指的是元素在2D平面内发生诸如缩放.平移.旋转.拉伸四种变化,在css3中对应4个方法分别是scale().translate().rotate()和skew(),可以说这4个方法是css3矩阵matrix的快捷方式,因为这4个方法本质都是由matrix实现的.类似地,在canvas

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform(),多次调用会叠加效果 setTransform(),每次调用都会清除上次的效果 两个方法都用于旋转.缩放.及平移坐标系(可以根据公式传入0或其他数据) x'=ax+cy+e y'=bx+dy+f 坐标系旋转公式(angle弧度) x'=x×cos(angle)-(y×sin(angle)) y'=y

HTML5 canvas大风车动画转啊转

一个纯正的HTML5页面效果,用IE浏览器图标模拟的大风车转啊转效果,不要以为IE图标是图片!!难度在于,里面的所有东西都不是图片,而是用canvas写的,你佩服我没有用,你应该佩服HTML5的canvas引擎,好好感谢它吧. <!doctype html> <html> <head> <meta charset='UTF-8' /> <title>宣化上谷战国红</title> <style> *{padding:0;m

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

html5 canvas首屏自适应背景动画循环效果代码

模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大家积极评论,给出宝贵意见 下 载 演示地址 本文地址:html5 canvas首屏自适应背景动画循环效果代码

前端-HTML5 canvas学习

canvas元素算是HTML5添加的最受欢迎的功能了.它是通过在页面中设定一个区域,然后用脚本来编辑图形. 可像下面这样来引入一个canvas图像 <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var cxt = canvas.getContext('