我们每天都在网上摸鱼，作为前端开发人员，网站上微妙的细节变化通过比别人会更关注。我一直注意到的一件事是网站上的动画的流畅性。动画对于用户体验来说是非常好的，有时我们可以一些有趣的动画来留住用户。

我们在使用 Canvas 绘制图形时，可能会想对绘制的图形进行变换，例如让图形旋转90度，或者让图像缩小放大等，这些效果都可以通过 Canvas API 的坐标轴变换处理功能来实现。

图形旋转

如果我们要想将图形进行旋转，例如下面这张图片：

可以通过 rotate() 方法来实现这个效果，rotate() 方法用于旋转当前的绘图，带有一个参数 angle，表示旋转角度。旋转的中心点是坐标的原点，是以顺时针方向进行旋转，如果想要以逆时针方向来旋转，可以将参数设置为负数。

本文介绍如何通过插件Leaflet.TrackPlayer来简洁高效的在leaflet上实现轨迹回放功能，以下仅做基础示意，更多功能和用法请参见文档。

今天给小伙伴们分享一个超棒的Vue图片任意裁剪插件VueImgCutter。

vue-img-cutter 基于 vue2.x 构建的轻量级剪切图片组件。支持移动图像、放大缩小图片、任意移动图片、固定比例/尺寸、远程图片裁剪等功能。

功能特色

• 兼容IE9+，MSEdge，Chrome，Firefox
• 两种展现形式，行内或弹窗
• 可旋转、缩放图片

把网页上的文字变成酷炫的 3D 风格，还能制作旋转动效，有了 ztext.js，只需要几行代码。

ztext 能做什么

ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库，让开发者能通过非常简单的 api 创造出酷炫的 3D 文字效果。配合 CSS 动画，可以实现惊艳酷炫的交互效果。

在去年的时候也实现过合成海报的功能，不过当时时间仓促，实现的比较简单。

就一个旋转功能，图片也不能拖动放大，也不能裁剪。

这次有时间就实现一个功能稍微多点的海报。

一、概要

总共有三屏，第一屏是选择图片，第二屏是合成图片，第三屏是显示结果图，可保存分享朋友圈。

页面内容不是很多，分析起来也比较简单。

1）每一屏的左右边距相同，上边距各不相同。

2）屏幕内的元素，大部分是居中，有些特殊边距的可用绝对定位，例如第一屏中父亲图与标语图，两张图有重叠部分。

一、2D 变换

1. 2D 位移

/* x 轴方向位移 30px */
transform: translateX(30px);
/* 分别设置 x 轴与 y 轴的位移 */
transform: translateX(30px) translateY(40px);
/* 同时设置 x 与 y 的方向位移 */
transform: translate(-50%, -50%);