随笔分类 - Canvas
摘要：createPattern作用 createPattern() 方法在指定的方向内重复指定的元素。 元素可以是图片、视频，或者其他 <canvas> 元素。 被重复的元素可用于绘制/填充矩形、圆形或线条等等。 网站http://www.w3school.com.cn/tags/canvas_crea
阅读全文
摘要：图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑，贝塞尔曲线，墨水和粉笔，笔和印章和图案 -等等。事实证明，网上没有太多关于此的内容。在下面的示例中，您请大家查看演示源代码，以便了解正在发生的事情。 这篇教程将带您从基础知识（在画布上绘制原始鼠标跟随线），
阅读全文
摘要：canvas 绘制各种动画效果时，我们经常会使用画布旋转，使绘制上去的元素有旋转的效果。 最近在项目中碰到了很严重的性能问题，经常排查发现是因为绘制批量文字时使用了画布旋转，且每行文字的旋转角度是不一样的，每次绘制前都会去动态的改变画布上下文context的旋转角度值，导致CPU占用太多。 而且发现
阅读全文
摘要：1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来添加的， 参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针
阅读全文
摘要：Canvas原理 Canvas我们把它翻译成画布，从字面意思我们就可以知道，不就是可以在上面画东西的布吗。好像很简单，没什么好说的。先看图： 从这几幅图我们可以看到以下几点： 1.每个小方格我们可以看作一个像素点。 2.Canvas和Screen的长和宽决定他们的图像，数据存储都可以看作是矩形数组(
阅读全文
摘要：初学者也许会误认为canvas中save方法是用来保存绘图状态的图形，而restore方法是用来还原之前保存的绘图状态的图形，其实不然。 save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。 在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。每个状态随时存储Canv
阅读全文
摘要：在二维平面上，常用的有以下三种基本的图形变化： 1）Translation 2）Scale 3）Rotation 在canvas的开发中，我们也经常会用到这样的一些图形变换，尤其是我们在写自定义View时，更是会经常利用到Matrix来实现一些效果，比如平移，旋转，缩放及切变等，相信很多朋友应该很想
阅读全文
摘要：坐标轴的旋转 不改变坐标原点的位置和单位长度，只改变坐标轴方向的坐标系的变换，叫做坐标轴的旋转． 设点M在原坐标系中的坐标为(x,y)，对应向量的模为r，幅角为α．将坐标轴绕坐标原点，按照逆时针方向旋转角θ形成新坐标系，点M在新坐标系中的坐标为（如图2-4），则 由此得到坐标轴的旋转的坐标变换公式
阅读全文
摘要：canvas转换为dataURL (从canvas获取dataURL) File对象转换为dataURL、Blob对象转换为dataURL File对象也是一个Blob对象，二者的处理相同。 dataURL转换为Blob对象 dataURL图片数据绘制到canvas 先构造Image对象，src为d
阅读全文
摘要：学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。 在判断填充的区域拉一条线出来，拉到图形的外面，这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边，此时这种穿过的方
阅读全文
摘要：清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况） var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearR
阅读全文
摘要：用canvas绘制线条和填充，fill()和stroke()调用顺序直接影响绘制的结构 先调用stroke在调用fill，绘制的效果看上去lineWidth只绘制出来一半，还以为是个大问题。 先调用fill在调用stroke，直接就解决了上面绘制的lineWidth只绘制一半的问题！
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件里的一个画面包含很多个元素，但是当缩放到某个局部位置时，需要绘制的元素个数就很少。那么怎么判断某个元素是否需要进行绘制呢？ 我们在绘制整个画面时，是进行循环遍历每个元素的，如下判断是否进行绘制的代码： 1 var elements =
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 自动保存的基本思路 1）软件每次打开都会创建一个保存画布元素信息的文件，文件名是在打开软件时生成的唯一字符串。可同时打开多个窗口，所以保存文件路径下work/context文件夹里可能会有多个文件。 2）每隔2分钟就更新一次context
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 保存文件 保存内容有哪些？ 我们需要保存的内容信息 1）context.json 存储画布状态信息和所有元素的配置信息（这个文件在过程中生成） 2）插入的图片、音频、视频等资源 3）所用到的字体文件 4）每一帧的缩略图 将这些文件压缩到一
阅读全文
摘要：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函数里计算出大网格每条线的间隔和小网格线的间隔，以及大网格和小网格绘制所用的颜色。 具体的实现算法也是参照另外一个软件
阅读全文
