本文简介点赞+关注+收藏=学会了学习Fabric.js，我的建议是看文档不如看demo。本文实现的功能：将元素拖进到画布中并生成对应的图形或图片。效果如下图所示：思路要实现以上效果，需要考虑以下几点：元素有拖拽功能。能在画布中生成对应的元素。画布有可能缩放。画布有可能移动。画布的位置可能在页面的某处。在3和4情况下还能在准确的位置生成元素。基于以上几点，我得出以下解法。解1：要让HTML元素具备拖拽功能，只要将draggable属性设置为true即可。解2：Fabric.js创建元素可看《Fabric.js从入门到膨胀》的基础图形篇，要创建图片可以看图片篇。解3：缩放画布我在《Fabric.j
作者：zyl910一、缘由Html5画布（Canvas）的上下文（Context2D）提供globalCompositeOperation属性，可用于控制图形的绘制时的合成模式。查了一下文档，发现多达共有26种合成模式。且文字介绍很简略，部分模式看不太懂。于是我编写了一个功能丰富的演示页面，能够随时调整globalCompositeOperation等绘制参数，且有详细信息文本框能用于分析像素合成的计算算法的等。使用该页面，能够很好的学习这26种合成模式。本文重点介绍演示页面的功能，及开发过程中的问题处理。下一篇文章将介绍合成模式的计算算法。二、合成说明与功能设计2.1MDN文档说明下图是MD
作者：zyl910一、缘由Html5画布（Canvas）的上下文（Context2D）提供globalCompositeOperation属性，可用于控制图形的绘制时的合成模式。查了一下文档，发现多达共有26种合成模式。且文字介绍很简略，部分模式看不太懂。于是我编写了一个功能丰富的演示页面，能够随时调整globalCompositeOperation等绘制参数，且有详细信息文本框能用于分析像素合成的计算算法的等。使用该页面，能够很好的学习这26种合成模式。本文重点介绍演示页面的功能，及开发过程中的问题处理。下一篇文章将介绍合成模式的计算算法。二、合成说明与功能设计2.1MDN文档说明下图是MD
作者：zyl910一、缘由上一篇文章“用于分析26种画布合成模式（globalCompositeOperation）的演示页面”给出了便于测试的演示页面，现在探究一下合成模式的计算公式。在网上搜索了一下，发现W3C《CompositingandBlendingLevel1》对合成模式的公式说的最详细，于是仔细阅读了该文档。该文档的篇幅比较长，且是英文版的，看起来比较吃力。且有些细节写的比较简略，若忽略了那些细节，可能会导致构造的公式不正确、计算结果不符。于是整理了一下我的心得，编写了此文。二、《CompositingandBlendingLevel1》阅读心得对于合成模式来说，最重要的内容在该
作者：zyl910一、缘由上一篇文章“用于分析26种画布合成模式（globalCompositeOperation）的演示页面”给出了便于测试的演示页面，现在探究一下合成模式的计算公式。在网上搜索了一下，发现W3C《CompositingandBlendingLevel1》对合成模式的公式说的最详细，于是仔细阅读了该文档。该文档的篇幅比较长，且是英文版的，看起来比较吃力。且有些细节写的比较简略，若忽略了那些细节，可能会导致构造的公式不正确、计算结果不符。于是整理了一下我的心得，编写了此文。二、《CompositingandBlendingLevel1》阅读心得对于合成模式来说，最重要的内容在该
幕布和模型的初始化src/canvas/Bullet.ts/***画布*子弹*/importAbstractCanvasfrom"./abstract/AbstractCanvas";importModelBulletfrom"../model/Bullet";/***画布是单例模式*在一个图层，所以只需要new一个实例即可。*/exportdefaultnew(classextendsAbstractCanvasimplementsICanvas{render():void{//super：调用父类的方法super.createModels()//调用渲染模型，防止每次重新渲染时，又生成新的
幕布和模型的初始化src/canvas/Bullet.ts/***画布*子弹*/importAbstractCanvasfrom"./abstract/AbstractCanvas";importModelBulletfrom"../model/Bullet";/***画布是单例模式*在一个图层，所以只需要new一个实例即可。*/exportdefaultnew(classextendsAbstractCanvasimplementsICanvas{render():void{//super：调用父类的方法super.createModels()//调用渲染模型，防止每次重新渲染时，又生成新的
