canvas变形方法transform的可视化演示

最新推荐文章于 2020-08-07 17:53:56 发布
最新推荐文章于 2020-08-07 17:53:56 发布
阅读量1.9k 收藏
点赞数
canvas 的变形方法transform是三个基本变形方法的结合，他们是
translate——移动；scale——缩放 ；rotate ——旋转，在transform方法中分解为x，y两个方向的斜切。
他的参数是变形矩阵的六个数值：m11, m12, m21, m22, dx, dy
变形矩阵：
m11 m21  dx  
m12 m22 dy  
0  0  1  

对于transform方法的使用，其实很难把握，所以写了下面这个演示

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>cssass.com</title>
<style>
#rule,#pad{float:left;margin:10px;}
#rule p{padding;0;margin:0;line-height:25px;}
#rule label{display:inline-block;width:80px;text-align:right;font-size:12px;}
#rule input{border:0;width:40px;}
#rule b{position:relative;display:inline-block;width:150px;height:10px;font-size:0;line-height:0;background:#fff;border:1px solid #aaa;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
#rule p a{position:absolute;top:-4px;left:50%;width:15px;height:15px;margin-left:-8px;border:1px solid #d3d3d3;background:#ececec;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
#rule p a:hover{border:1px solid #999;background:#dcdcdc;}
.footer{font-size:12px;padding:10px 0;}
</style>
</head>
<body>
<div id='rule'>
<h3>Transform方法可视化操作演示</h3>
<p οnmοusedοwn='G.change(this,event,4);'><label>水平缩放 m11: </label> <b class='range'><a οnfοcus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m11' type='text' /></p>
<p οnmοusedοwn='G.change(this,event,4);'><label>y轴斜切 m12: </label> <b class='range'><a οnfοcus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m12' type='text' /></p>
<p οnmοusedοwn='G.change(this,event,4);'><label>x轴斜切 m21: </label> <b class='range'><a οnfοcus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m21' type='text' /></p>
<p οnmοusedοwn='G.change(this,event,4);'><label>垂直缩放 m22: </label> <b class='range'><a οnfοcus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='m22' type='text' /></p>
<p οnmοusedοwn='G.change(this,event,1000);'><label>平移 dx: </label> <b class='range'><a οnfοcus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='dx' type='text' /></p>
<p οnmοusedοwn='G.change(this,event,1000);'><label>纵移 dy: </label> <b class='range'><a οnfοcus="blur();"  href='javascript:;'>&nbsp;</a></b> <input id='dy' type='text' /></p>
<div class='footer'>首先在右侧用鼠标画一矩形。<br />Javascript by <a href='http://ww.cssass.com'>cssass.com</a></div>
</div>
<canvas id="pad" width='800' height="600" style="position:relative;border:1px solid #c3c3c3;cursor:crosshair;">注意：ie9以下用户请绕行</canvas>
<script>
var $id=function(o){return document.getElementById(o);}
var con=$id("pad").getContext('2d');
var G={};
G.x1=G.y1=G.x2=G.y2=0;
G.val=[[4,1],[4,0],[4,0],[4,1],[1000,0],[1000,0]];
G.init=function(){
var list=$id('rule').getElementsByTagName('p');
var left, value;
for(var i=0; i<list.length; i++){
value = G.val[i][1];
left =(0.5 + G.val[i][1] / G.val[i][0] ) * 100;
list[i].getElementsByTagName('a')[0].style.left= left + '%';
list[i].getElementsByTagName('input')[0].value= value;
}
}
G.draw=function(){
G.init();
var e = arguments[0];
G.x1 = (e.layerX) ? e.layerX : e.offsetX,
G.y1 = (e.layerY) ? e.layerY : e.offsetY,
$id("pad").οnmοusemοve=function(e){
con.clearRect(0,0,800,600);
G.x2= (e.layerX) ? e.layerX : e.offsetX;
G.y2= (e.layerY) ? e.layerY : e.offsetY;
con.save();
con.translate(G.x1,G.y1)
G.rect(G.x1,G.y1,G.x2,G.y2);
con.restore();
}
$id("pad").οnmοuseup=function(){
$id("pad").οnmοusedοwn=null;
$id("pad").οnmοusemοve=null;
}
}
G.change=function(obj,e,l,v){
var o=obj.getElementsByTagName('a')[0];
var e = e ? e : window.event;
if(!window.event) {e.preventDefault();}
var tX=o.offsetLeft,
dx=e.clientX;
document.οnmοusemοve=function(e){
var e = e ? e : window.event;
var len=tX+e.clientX-dx+8;
if(len>=0 && len<=150){
var rat=(len / 150) * 100;
o.style.left=rat+ "%";
obj.getElementsByTagName('input')[0].value =l * Math.round((rat - 50)*10)/1000;
G.transform();
}
if(window.event) e.returnValue=false;
}
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
G.transform=function(){
var m11=($id('m11').value == 0)? 0.001 : $id('m11').value,  //firefox下m11,m12值不能为0
m12=$id('m12').value,
m21=$id('m21').value,
m22=($id('m22').value == 0)? 0.001 : $id('m22').value,
dx=$id('dx').value,
dy=$id('dy').value;
con.clearRect(0,0,800,600);
con.save();
con.translate(G.x1,G.y1);  //变形的参考点设为图形的左上角
con.transform(m11, m12, m21, m22, dx, dy);
G.rect(G.x1,G.y1,G.x2,G.y2);
con.restore();
}
G.rect=function(x1,y1,x2,y2){
var grd=con.createLinearGradient(0, 0, x2 - x1, y2 - y1); //弄一个渐变效果
grd.addColorStop(0,"#3F5816");
grd.addColorStop(1,"#B40000");
con.fillStyle=grd;
con.fillRect(0, 0, x2 - x1, y2 - y1);
}
window.addEventListener("load", G.init, false);
$id("pad").addEventListener("mousedown", G.draw, false);
</script>
</body>
</html>


相关文章 bezierCurveTo方法的可视化演示：http://bbs.blueidea.com/thread-2999324-1-1.html

好消息! 
目前已经有一款Illustrator的插件支持导出canvas code：http://visitmix.com/labs/ai2canvas/

mj_小军
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas的transform函数
shaliwang的博客
11-10 678
文章目录变换矩阵什么是线性映射什么是线性变换什么是变换矩阵 变换矩阵 度娘定义：如果T是一个把Rn映射到Rm的线性变换，且x是一个具有n个元素的列向量，那么我们把mxn的矩阵A，称为T的变换矩阵。 什么是线性映射 度娘定义：线性映射是从一个向量空间V到另外一个向量空间W的映射，且保持加法运算和数量乘法运算。 此处线性映射的映射是动词，但是在其定义中的映射是一个名词。 这里的向量空间和线性空...
前端开发中需要用到的变换矩阵
zhjp4295216的专栏
08-31 977
http://shawphy.com/2011/01/transformation-matrix-in-front-end.html 想写写关于矩阵变换的博文已经想了很久了，今天看到 winter 写的一篇博客CSS3:transform与transitio
canvas的transform
first_shun的博客
06-10 1560
canvas的transform()方法是通过使用矩阵的变换的方法来实现对canvas的旋转、缩放、移动等操作； 语法是ctx.transform(a,b,c,d,e,f); 其中参数的分别是： a：水平缩放 b：垂直倾斜 c：水平倾斜 d：垂直缩放 e：水平移动 f：垂直移动 矩阵的描述： 矩阵的计算转换为方程式是： 转换后的坐标的x为：x` = a*x+c*y+e; 转换后的坐标的y为：y` =b*x+c*y+f; 其中x,y分别为转换之前点的坐标，这样就可以通过transfo
Canvas transform浅析
weixin_30483013的博客
08-28 380
没有前奏，直接进入主题 transform调用方法： ctx.transform(a,b,c,d,e,f);如下 var ctx = document.getElementById("myCanvas").getContext("2d"); //调用 ctx.transform(1,1,-1,1,1,1); //画个圆形的路径 ctx.arc(200,100,25,0...
Canvas的transform详解
heixiu8的博客
11-03 2996
图形的矩阵变换，其实就是图形中每个点的变换 Canvas的transform(a,b,c,d,e,f)方法 和Matrix(矩阵)的对应关系 _                 _ |     a   c   e   | |     b   d   f    | |_   0   0   1 _| Matrix和点（x,y）的对应关系 x 对应第一行，y对应第二行
canvas可视化波形音频播放器(原创)
03-07
"canvas可视化波形音频播放器(原创)"项目就是这样一个实现，它将音频数据与视觉元素相结合，提供了一种直观的音频播放体验。 首先，我们要理解Canvas的基本概念。Canvas是一个基于矢量图形的二维画布，通过...
数据可视化-canvas-svg-Echarts
08-19
在本主题中，我们将深入探讨三种主要的数据可视化技术：HTML5的Canvas、SVG（可缩放矢量图形）以及ECharts，一个基于JavaScript的数据可视化库。 1. **Canvas**: Canvas是HTML5中的一个重要元素，它允许开发者通过...
前端可视化-基于Canvas的迷你时钟
02-08
该时钟基于Canvas实现，充分利用了Canvas2D绘图API的优势，让前端可视化技能更上一层楼，同时它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API，使用它来绘图更像是传统的“编写代码”，...
canvas 音谱可视化
08-12
而`Alan Walker - Fade.mp3`是一个音频文件，用于演示音谱可视化的效果。 通过这样的音谱可视化，用户不仅可以听到音乐，还可以看到音乐的“形状”，增加了互动性和趣味性。同时，这也为开发者提供了丰富的可能性，...
canvas音谱可视化mp3音乐播放器代码
06-02
HTML5 Canvas音谱可视化MP3音乐播放器是一种利用现代Web技术实现的创新音频播放体验。Canvas作为HTML5的一个重要组成部分，允许开发者在网页上进行动态图形绘制，而不仅仅是静态图像展示。结合AudioContext API，...
深入解析HTML5 Canvas控制图形矩阵变换的方法
01-21
在介绍矩阵变换transform()前，我们来说一说什么是变换矩阵。 以上是Canvas中transform()方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为context.transform(a,b,c,d,e,f)。 各参数意义对应如下表： 参数 意义 a 水平缩放（1） b 水平倾斜（0） c 垂直倾斜（0） d 垂直缩放（1） e 水平位移（0） f 垂直位移（0） 当我们把对应的0或1代入进矩阵，可以发现这是一个单位矩阵（水平和垂直缩放默认值是1，代表缩放1倍，即不缩放）。该方法使用一个新的变化矩阵与当前变换矩阵进行乘法运算，然后
canvas transform参数解析
weixin_33701294的博客
01-22 746
最近正在学习canvas中，今天学到了transform这个方法，6个参数看的脑阔疼，查了一些资料才算领悟了一些，这篇文章算是用来记录接下去的一些猜想以及证明猜想的过程。 前言：在本人的概念中，整个canvas画布就是一个以左上角为原点的平面直角坐标系（不知道的请回顾奇变偶不变.），这样一来很多概念就比较容易代入理解了。 就是这样： 官方的参数解释 1.a 水品缩放 改变x轴的单位长度。解释：...
canvas transform 使用 详解
IT水很深，路还很长
08-07 2070
图形的矩阵变换，其实就是图形中每个点的变换 Canvas的transform(a,b,c,d,e,f)方法和Matrix(矩阵)的对应关系 _ _ |ace | |bdf | |_001_| Matrix和点（x,y）的对应关系 x对应第一行，y对应第二行 点（x,y）经过矩阵变换后的结果 x' =ax + cy + e; y' = bx + dy + ...
canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)
IT1995的博客
06-01 4549
这里首先演示下位移，这里使用的函数是translate(x,y)这个函数是叠加的，也就是说，当translate(100,100)，后再次调用translate(200,200)，那么最后圆点的基准值就为translate(300,300)。 也就是说如果要实现某个图形的位移后，还要变回来。 代码如下： translate(100, 100); //TODO ... ... translate(-100, -100); 或者使用如下的方式： save(); //保存当前图形状态 Res...
canvas(二) 复合变形
a_alin的博客
07-15 413
一，canvas    1，全局复合图形操作       ctx.globalCompositeOperation = type;       type用于设置新图形与原有图形的融合       type取值：            两种前缀：                以原图为准使用destination-                以新图为准使用source-            d...
【绘制】HTML5 Canvas自定义坐标变换。transform()和setTransform()的介绍和使用
苏一恒
09-19 2235
介绍 我们之前实现了旋转(rotate)、缩放(scale)和平移(translate)，但是如果要实现更加复杂的坐标变换如“错切”就没那么容易了。 错切效果图 所以，接下来介绍更加基础的方法，来实现自定义的坐标变换。不仅能够实现旋转、错切和平移，也能够实现错切等等坐标变换。 自定义坐标变换 我们使用两个用于坐标变换的方法。 CanvasRenderingContext2D对象...
玩转canvas之你不知道的transform
weixin_45449964的博客
05-17 1034
canvas之transform精解transformcanvas-transform实现的效果差异css3的transformcanvas的tranformcanvas转换的缺点canvas转换矩阵的重置canvas中转换矩阵的b和c总结 transform canvas中的transform和css3中的transform在所表达的含义是相同的，都是对当前的元素/图像的的环境进行转换，也就是我们熟知的平移，旋转，缩放。虽然使用方法是相同的，但所实现出来的效果却是不同的。 canvas-transform
CANVAS TRANSFORM
sunyiban的专栏
08-04 339
x' = x+dx; y' = y+dy; x' = x*sx; y' = y*sy; x' = x*cos(angle)-(y*sin(angle)); y' = y*cos(angle)+(x*sin(angle)); transform(a,b,c,d,e,f); setTransform(a,b,c,d,e,f); x' = ax+cy+e; y'
HTML5 canvas transform与矩阵
weixin_30614109的博客
01-27 192
HTML5 canvas transform与矩阵 首先，我们看一下w3school上的例子： Javascript语法：context.transform( a , b , c , d , e , f ); 定义与用法：画布上的每个对象都拥有一个当前的变换矩阵。而transform则是用来定义一个新的矩阵，来替换原来的变换矩阵。 六个参数，对应的矩阵就是： 在这里...
vue3 canvas 可视化编辑器
最新发布
10-27
Vue3 canvas可视化编辑器是一个基于Vue3的前端开发工具，用于创建和编辑基于HTML5 Canvas的可视化界面。 这个编辑器提供了一个直观且易于使用的界面，使用户能够在画布上创建各种形状、添加文本和图像，并进行自由的拖拽、缩放和旋转等操作。用户可以通过简单的鼠标和键盘交互，实时预览效果，并进行实时编辑。 编辑器提供了丰富的编辑功能，包括多种形状绘制工具（如矩形、圆形、多边形等）、文本编辑工具、图像选择和上传工具等。用户可以根据自己的需求，通过简单的点击和拖拽即可完成设计和布局。 此外，编辑器还支持图层管理功能，用户可以对创建的各个元素进行层级调整，方便用户对画布进行复杂的布局和设计。同时，编辑器还具有撤销和重做功能，确保用户在编辑过程中能够灵活地进行操作。 通过Vue3的强大的响应式数据绑定和组件化开发能力，编辑器可以快速响应用户的操作，并实时更新画面。同时，Vue3的优秀性能保证了编辑器的高效率和流畅性。 综上所述，Vue3 canvas可视化编辑器是一个功能丰富、易于使用的前端开发工具，方便用户创建和编辑基于HTML5 Canvas的可视化界面，并能够实时预览和编辑。它具有直观的界面、强大的编辑功能和高效的性能，能够满足用户设计和开发的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值