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

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

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

一、概要

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

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

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

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

JavaScript做个贪吃蛇小游戏（过关-则加速）

在浏览器打开文件，无需网络直接玩。

/*

* 拖动图片封装

html格式：<img lay-src="${item.Resourcesurl}" alt="${item.ResourcesName}" style="position: absolute;" onmousemove="drag(this)" >

什么是懒加载？

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在图片进入可视区域后才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。

实现思路：在加载更多数据前，获取当前列表中的第一个或者最后一个元素位置（firstItem.offsetTop、lastItem.offsetTop），加载更多数据完成后，将滚动条位置定位到获取的元素位置（firstItem.offsetTop、lastItem.offsetTop）。

我们为什么需要理解SQL语句的执行顺序？理解SQL语句在数据库内部的真实执行流程，对我们写出高效、正确、可维护的SQL查询语句非常重要。SQL（Structured Query Language）是关系型数据库的标准查询语言，语法结构看似线性排列（如：SELECT ... FROM ... WHERE ... GROUP BY ... HAVING ... ORDER BY ... LIMIT），

本文将引导你使用canvas和JavaScript创建一个简单的绘图程序。

首先准备容器Canvas元素，接下来所有的事情都会在JavaScript里面。

1 <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

获取绘图环境，context对象提供了用于在画布上绘图的方法和属性

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

一、前言

• Vue自定义指令有全局注册和局部注册两种方式。
• 本篇局部自定义指令不做叙述