随笔分类 - Canvas
摘要：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 转
阅读全文
摘要：本文将引导你使用canvas和JavaScript创建一个简单的绘图程序。 创建canvas元素 首先准备容器Canvas元素，接下来所有的事情都会在JavaScript里面。 获取绘图环境 canvas元素本身没有任何外观，它就是一块空白画板，提供给JS的一套API，大部分的API都不在canva
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 html5中标签canvas，函数drawImage()： 使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。参数传递三种形式： 1）drawImage(image,x,y)：在canvas中(x,y)处绘制图片
阅读全文
