web前端
帅华君
这个作者很懒,什么都没留下…
展开
-
HTML5的canvas画布常用绘图命令总结
原文链接:http://shuaihua.cc/blog/20150311.php阳光美美哒~啊,首先要在HTML中新增一个canvas标签,然后给他一个身份证号,噗~就是id啦~之后在JavaScript中获取canvas这个DOM对象并进行一系列属性操作//首先生命一个变量,我用来存放canvas画布的基本信息var canvas_info = {原创 2016-02-16 21:22:50 · 754 阅读 · 0 评论 -
Airglass.js开发笔记:最佳实践的前奏
Airglass,从碰撞的火花中,孕育一个种子,选对语言像选了对的舞台;配置一套构建环境像DNA按预定规则构建出各种蛋白质;不断完善的类继承关系像千丝万缕错综复杂的神经网络,诞生前的痛;添加事件监听器,像婴儿睁开了眼,接收来自这个世界的善意祝福;订阅事件,像身体各器官各细胞沟通协作。他登上了台。继承关系我将Airglass中凡是支持事件的类统一都去继承Event类。Element表示一类抽象...原创 2019-09-12 18:02:37 · 577 阅读 · 0 评论 -
Airglass.js开发笔记:监听
Airglass要做的是FUI/HUD风格的UI基础组件库,自然少不了对UI交互功能的支持。我利用事件委托,将canvas监听到的事件派发给canvas中绘制的虚拟元素。我甚至让开发者能够订阅虚拟元素触发的各种定制化事件,例如创建和移除事件等。据此实现用户操作画布中虚拟UI的可能。继承性在起步走那一篇想法中,我在最后提到Airglass.js中类的定义以及如何梳理类之间继承关系这件事。对此,我...原创 2019-09-12 17:58:43 · 334 阅读 · 0 评论 -
图解Gulp使用指南
gulp适合处理小微型任务,比如操作文件系统,包括移动、删除、重命名等操作。除了可以使用gulp插件,开发者还可以自己创建插件。安装必要依赖确保系统中安装了最新版本的node和npm。使用npm命令全局安装gulp-cli,随后在本地项目中使用npm安装gulp。创建配置文件gulp的默认配置文件是gulpfile.js,gulpfile.js中导出一系列任务,这些任务其实...原创 2019-08-06 23:44:54 · 318 阅读 · 0 评论 -
Github账号授权登录开发博客留言功能
以前用过weibo的开放平台授权登录,自从换了要重新申请,心想何不趁次换GitHub授权方式开发博客网站的评论功能。基于以下原因,我最终选择GitHub授权方式:我使用GitHub的频率远高于使用微博,对娱乐八卦社会新闻不感兴趣; 自己博客网站里的内容编程一类居多,GitHub天生具有这一属性; 因为GitHub是开发者的聚集地,使用GitHub账号留言的用户,方便进一步互相学习。以前看...原创 2019-07-27 16:47:16 · 778 阅读 · 0 评论 -
基于Webpack构建前端页面
原文作者:陈帅华-探索技术艺术与国学之美原文链接:http://www.shuaihuajun.com/article/webpack-build-spa/当前端项目做多了之后,每次开始一个新前端项目,我都会配置几乎和之前无差别的开发和前端代码构建环境,虽说温故而知新,可量变最终是要质变的。为了解决我这一痛点以及喜欢尝试新鲜事物的心态,但又不想直接套用那些对学习具有核心价值的前端知识没多大...原创 2019-07-23 22:28:49 · 241 阅读 · 0 评论 -
JavaScript中bind、call、apply的用法
改变JavaScript中执行函数的this指向,用到call、apply和bind三个函数继承自Function.prototype的方法,三者功能相近又各有不同。在JavaScript中使用typeof关键字检测数据类型存在其局限性,比如无法区分数组、对象和null:typeof [] // -> "object"typeof {} // -> "object"typ...原创 2019-07-18 12:56:49 · 167 阅读 · 0 评论 -
图解JavaScript对象原型与原型链
图解JavaScript对象原型与原型链使用颜色、形状可视化Javascript中抽象的原型链概念:橙黄色实心代表函数,函数是可执行的对象; 橘红色圈圈代表prototype属性,且总是存在于函数对象中; 蓝紫色带箭头线段代表原型链的走向; 蓝绿色实心代表普通对象圈圈+实心组合形式的含义:橘红色圈圈+黄色实心代表prototype属性为函数对象; 橘黄色圈圈+蓝绿色实心...原创 2019-07-11 18:49:31 · 227 阅读 · 0 评论 -
图解JavaScript对象属性四个特性
JavaScript中的对象属性除了有属性名和属性值,还包括其它有意义的特性,比如可写性、可枚举性和可配置性,还有setter和getter特性,这些特性对开发健壮的库非常有帮助。图解JavaScript对象属性四个特性我在上图中简单模拟了一处疑似重污染工厂的用水与排污系统模型,通过类比可视化帮助我理解JavaScript对象属性的4个特性:索取,代表工厂从大自然中索取洁净水源,水表记录了...原创 2019-07-12 21:13:39 · 224 阅读 · 0 评论 -
Javascript中的原型链、prototype、__proto__的关系
javascrip中内置的对象共12个,其中10个属于函数类型——String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event,其中两个是对象类型——Math,JSON。函数类型拥有__proto__和prototype属性,对象类型只有__proto__属性,prototype和__proto__与原型链是什么关系?一图一文捋清楚。原创 2016-10-06 16:07:18 · 2837 阅读 · 0 评论 -
webpack其实没那么可怕——官方文档解读
翻译了webpack官方英文文档,整合互联网上对webpack介绍的教程,完整全面的认识使用webpack。原创 2016-10-04 00:01:07 · 19613 阅读 · 1 评论 -
理解Canvas中的transform、setTransform函数
阅读原文:http://shuaihua.cc/article/html5/canvas-transform.php 先用transform坐标系变换绘制一个立方体绘制结果源代码ctx.save(); ctx.translate(win_width/2-50, win_height/2-50); // 后 ctx.save(); ctx.transform(1, -0.05, 0, 1,原创 2016-10-03 23:56:30 · 4366 阅读 · 0 评论 -
Airglass.js最佳实践:标注多边形区域
我打算用Airglass.js重新实现canvas版的LabelImg图像标注切割功能,作为Airglass.js的第一个最佳实践。实现图像的标注和切割,关键不是切割图像,而是如何标注多边形区域,获取标注点信息。为此我为Airglass新增了创建多边形的Polygon类。拖拽多边形和矩形或圆形不同的是,多边形的中心点坐标位置和多边形的边界是通过计算得来的。用户不断的为多边形增加新的控制点,因...原创 2019-09-12 18:05:39 · 772 阅读 · 0 评论