现在的位置: 首页 > 综合 > 正文

html5 canvas 图像转换与缩放

2018年07月12日 ⁄ 综合 ⁄ 共 1970字 ⁄ 字号 评论关闭

scale 缩放绘图

秒速赛车公式 www.l19l7.cn scale() 方法缩放当前绘图,更大或更小。

语法:context.scale(scalewidth,scaleheight);

参数:

??????????? scalewidth:缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

??????????? scaleheight:缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%,)

备注:如果您对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。

rotate旋转绘图

rotate()方法旋转当前的绘图

语法:context.rotate(angle);

参数:旋转角度,以弧度计。如果需要将角度转换为弧度,使用degrees*Math.PI/180进行转换。

translate移动绘图

translate() 方法重新映射画布上的 (0,0) 位置。

语法:context.translate(x,y);

参数:x:添加到水平坐标x的值,y:添加到水平坐标y的值。

transform 绘图的转换矩阵

画布上的每个对象都拥有一个当前的变换矩阵。

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵:

也就是说,transform() 允许您缩放、旋转、移动并倾斜当前的环境。

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

参数:a:水平缩放绘图,b:水平倾斜绘图,c:垂直倾斜绘图,d:垂直缩放绘图,e:水平移动绘图,f:垂直移动绘图。

其二维坐标系的矩阵转换公式是:

其中等号左边的”x","y"是旧坐标值(prevCoordSys),等号右边的"x","y"是新坐标值(newCoordSys),a,b,c,d,e,f是需用用户来填写的变换参数,新就坐标就是通过一个矩阵运算的函数关系进行转换。

1、矩阵变换

矩阵变换公式是,或写成[1,0,0,1,tx,ty],其中tx和ty就是translate函数的两个参数,运算公式:

2、伸缩变换

矩阵变换公式是,或写成【sx,0,0,sy,0,0],其中sx,sy就是scale函数的两个参数,运算公式:

3、旋转变换

矩阵变换公式:,或写成[cos(a),sin(a),-sin(a),cos(a),0,0],其中a就是rotate要旋转的函数角度,运算公式:

4、x轴,y轴歪斜变换

,[1,0,tan(ax),1,0,0]
表示向x轴倾斜变换,[1,tan(ay),0,1,0,0]表示向y轴歪斜变换


setTransform重置当前转换为单位矩阵

画布上的每个对象都拥有一个当前的变换矩阵。

setTransform() 方法把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行transform()

换句话说,setTransform() 允许您缩放、旋转、移动并倾斜当前的环境

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

参数:同上面transform

示例代码:

<span style="font-family:Comic Sans MS;">var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            context.save();
            context.scale(2, 2);
            context.strokeRect(10, 10, 100, 100);
            context.restore();

            context.save();
            context.rotate(10* Math.PI / 180);         
            context.fillStyle = "yellow";
            context.fillRect(300, 0, 250, 100)
            context.restore();

            context.save();
            context.translate(100, 30);
            context.fillStyle = "blue";
            context.fillRect(500, 0, 120, 120);
            context.restore();


            context.save();
            context.transform(1.2, 0, 0, 1.2, 10, 10);
            context.fillStyle = "green";
            context.fillRect(400, 260, 220, 120);
            context.restore();

            context.save();
            context.setTransform(1, 0.5, -0.5, 1, 30, 10);
            context.fillStyle = "red";
            context.fillRect(100, 100, 250, 100);
            context.restore();
           </span>

抱歉!评论已关闭.

  • 倒着走能治腰颈椎痛?假的! 2019-04-19
  • 长效机制加速推进 楼市下半年或持续降温 2019-04-19
  • 树立文化自信 创新节庆模式 2019-04-19
  • 朝韩将军级会谈时隔11年后在板门店重启 2019-04-19
  • 经济日报多媒体数字报刊 2019-04-18
  • 搞好公有制就是好,故得出结论:计划经济好。 2019-04-18
  • 云南理发店老板涉嫌杀害女演员因办卡纠纷起杀心 2019-04-18
  • 南海网-海南新闻网-权威媒体 海南门户 2019-04-17
  • 海底捞回应侵犯音乐人林海著作权:已停止播放 2019-04-17
  • 自然型社会和规则性社会,是会随着科技的改变而发生改变的,当然只有规矩也就是制度才能规范人的行为,所以国家是不会灭亡的,但国家的形式是会发生改变的。 2019-04-17
  • 惊艳!上外学子英译60首热门中文歌  让世界倾听中国 2019-04-16
  • 西安,给盲人朋友留一条路吧…无障碍设施盲道-编辑整合 2019-04-16
  • 的确如此。报刊亭取消的确是短视行为。把报刊亭设计的现代化一些,与城市绿化衔接起来,相得益彰,成为文化一景多好。 2019-04-16
  • 让更多企业和劳动者尝到协商的“甜头” 2019-04-16
  • 2014金家岭财富论坛嘉宾云集(二) 2019-04-15
  • 886| 822| 510| 59| 962| 694| 184| 106| 908| 846|