【HTML5】Canvas中的tranform变换矩阵

在Canvas中有个方法比较特殊，不同于画笔中其他各种旋转，而是一种矩阵变换，方法名为tranform。

调用示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");context.transform(2,0,0,2,150,150);context.fillRect(0,0,100,100);});</script></head><body><canvas id="myCanvas" width="1000px" height="1000px"></canvas></body>
</html>

其中transform方法中的参数假设一次为a、b、c、d、e、f。

如下具体每个参数的作用。大家可以试试代码中加tranform和没加tranform方法的效果就可以更加明了trnaform的作用。

【HTML5】Canvas中的tranform变换矩阵相关推荐

用html5做淡出淡入效果,在Html5 canvas中淡入淡出
我已经有了一个图像的画布,我想淡入淡出图像不断.我已经使用上面的代码:在Html5 canvas中淡入淡出 var canvas; var context; var ga = 0.0; var tim ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
html5创建三次贝塞尔曲线,HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线: 复制代码代码如下: context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) c ...
html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
html5怎么转换,HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
HTML5 Canvas中 fillText() 和 strokeText() 的区别
前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了.这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 stroke ...
Foundation HTML5 Canvas中的2处错误
最近公司项目需要使用HTML5 Canvas开发公司大厅展示系统,当然这个项目还在进行中,不过我在进行另外一个新项目,等项目结束时,我将分享项目代码.学习HTML5 canvas主要书籍是<Fo ...
HTML5 Canvas中实现文字链接
HTML5中没有关于链接的API,所以我们只有自己来实现了. 首先,我们来想一下,链接有什么特点.第一个想到的估计就是它能跳转,这是链接最显著的特点,当然这也是废话,要不怎么能叫链接?第二个想到的可能 ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...

【HTML5】Canvas中的tranform变换矩阵

【HTML5】Canvas中的tranform变换矩阵相关推荐

最新文章

热门文章