随笔分类 - html5
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 自动保存的基本思路 1）软件每次打开都会创建一个保存画布元素信息的文件，文件名是在打开软件时生成的唯一字符串。可同时打开多个窗口，所以保存文件路径下work/context文件夹里可能会有多个文件。 2）每隔2分钟就更新一次context
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 保存文件 保存内容有哪些？ 我们需要保存的内容信息 1）context.json 存储画布状态信息和所有元素的配置信息（这个文件在过程中生成） 2）插入的图片、音频、视频等资源 3）所用到的字体文件 4）每一帧的缩略图 将这些文件压缩到一
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 导出的视频和播放器自动播放效果时一样的，这样用户就可以传到视频网站分享出去，或者mp4文件发送分享给朋友。 导出视频过程 我们导出视频的思路就是： 将画布上绘制的画面一张张存储成图片，我们是一秒存20张图片，假如一个8帧的作品，每一帧的时
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片，并且展示在软件里是动态的，例如插入下面这张gif图。 在软件里显示的同样是这样的动态效果： 那么这张动态的图是怎么绘制到canvas上面的呢，如果只是像绘制一张普通图片用context.drawIm
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件。 MouseEventClass就是绑定事件的过程，我们这里只列出部分代码，未列出的事件绑定的部分同理。 如何使用上面我们创建的两个类呢 我们在使用的时候先将MouseEventInfo这个类初
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种，作为开发者我们一直想支持用户可以拖拽的类似word里面图形库，但目前还没有找到比较合适的库。 下图中所有的图形都是我们自己写代码在canvas上绘制方法出来的，可以改变实心/空心，改变
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 元素和影子 我们在主画布上绘制所有添加到画布上的元素，主画布上的所有元素存储在commonElements中。 在hitCanvas上，对应每一个元素commonElement都有一个对应的hitElement元素，这些元素存储在另外一个
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时，网格能跟着我的鼠标滚动而相应的有放大缩小的效果。 下面是具体实现的代码，draw函数里计算出大网格每条线的间隔和小网格线的间隔，以及大网格和小网格绘制所用的颜色。 具体的实现算法也是参照另外一个软件
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 多个canvas画布 从下面的截图我们可以看到有5个canvasDOM元素，id分别为canvas，ghostCanvas，HitCanvas，gridCanvas和animation_canvas，这里我们先介绍前4个canvas的作用
阅读全文
摘要：先介绍一下我负责的软件项目 AxeSlide斧子演示，估计大部分人没有听说过，但国外有一款叫Prezi的软件，应该有人使用过。 这是我们产品的官网http://www.axeslide.com/，里面有很多用户上传的作品看过一个之后就知道这个软件具体的作用了。 下面这个gif的效果就是用软件做出来的
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 前言 在我的另一篇博文 Canvas坐标系转换 中，我们知道了所有的平移缩放旋转操作都会影响到画布坐标系。那在我们对画布进行了一系列操作之后，怎么再知道当前矩阵数据状态呢。 具体代码 首先请看下面的一段代码（下文具体解释代码作用）： 1
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。在默认坐标系中，每一个点的坐标都是直接映射到一个CSS像素上。 但是如果图像
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变，它们会对画布的变换矩阵产生影响。 函数 方法 描述 translate dx,dx 转
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 html5中标签canvas，函数drawImage()： 使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。参数传递三种形式： 1）drawImage(image,x,y)：在canvas中(x,y)处绘制图片
阅读全文
