随笔分类 - HTML5

摘要:很多开发的童鞋都是只身混江湖、夜宿城中村,如果居住的地方安保欠缺,那么出门在外难免担心屋里的财产安全。 事实上世面上有很多高大上的防盗设备,但对于机智的前端童鞋来说,只要有一台附带摄像头的电脑,就可以简单地实现一个防盗监控系统~ 纯 JS 的“防盗”能力很大程度借助于 H5 canvas 的力量,且 阅读全文
posted @ 2016-07-10 12:19 vajoy 阅读 (16310) | 评论 (81) 编辑
摘要:同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击(可以参考我的这篇文章)。SOP要求两个通讯地址的协议、域名、端口号必须相同,否则两个地址的通讯将被浏览器视为不安全的,并被block下来... 阅读全文
posted @ 2015-02-19 14:03 vajoy 阅读 (22193) | 评论 (10) 编辑
摘要:hammerJS是一个优秀的、轻量级的触屏设备手势库,现在已经更新到2.04版本,跟1.0版本有点天壤地别了,毕竟改写了事件名并新增了许多方法,允许同时监听多个手势、自定义识别器,也可以识别滑动方向。不过对于新版本的hammerJS却及其匮乏中文指引文档,就着这一点我还是上官网翻译下英文文档,写一篇... 阅读全文
posted @ 2015-01-29 22:40 vajoy 阅读 (11796) | 评论 (6) 编辑
摘要:这是本系列的最后一篇入门文章,主要是对剩余的未说明的canvas方法来逐个介绍。首先,如果你是一名擅长矢量设计的设计师,对Illustrator或者Fireworks很熟悉的话,那你肯定知道它们有一个很强大的矢量混合处理功能,可以对多个矢量路径进行“合并”、“拆分”、“结合”、“相交”等系列操作。 ... 阅读全文
posted @ 2014-12-23 18:36 vajoy 阅读 (3773) | 评论 (0) 编辑
摘要:已经第六章了,也差不多接近尾声,如果你从第一章耐心follow到本章结束,那你便能掌握canvas的大部分知识点(当然如果要精通,还是得多靠练习,做一些小案例)。今天我们要学习的是canvas的变形转换方法。缩放方法scale()在canvas中,如果我们需要缩放当前绘图对象,可以利用 scale(... 阅读全文
posted @ 2014-09-30 18:58 vajoy 阅读 (2616) | 评论 (0) 编辑
摘要:今天要介绍的是canvas对图形对象的操作,包括图像、视频绘制,和操作像素对象的方法。图片/视频的绘制在canvas中,我们可以通过drawImage() 的方法来绘制图片或视频文件,其语法为:ctx.drawImage( img, clip_x,clip_y,clip_w,clip_h, x, y... 阅读全文
posted @ 2014-09-29 20:35 vajoy 阅读 (5799) | 评论 (2) 编辑
摘要:前几章我们学习了矩形、多边形、圆形、曲线等图形的绘制,今天来学习下更简单一些的文本绘制及其各种功能方法。在canvas中我们可以通过strokeText() 和 fillText() 来绘制描边文本或者实心文本:您的浏览器不支持canvas,建议使用最新版的ChromestrokeText() 和 ... 阅读全文
posted @ 2014-09-25 20:17 vajoy 阅读 (2114) | 评论 (1) 编辑
摘要:前两章我们掌握了线段、矩形和多边形的绘制方法,今天我们主要是学习如何绘制圆弧和贝塞尔曲线。圆弧的绘制圆弧可以理解为一个圆上的某部分线段,在canvas中,绘制一条圆弧的语法如下:ctx.arc( 圆心x坐标, 圆心y坐标, 圆的半径r , 开始角度, 结束角度 );其中的 “开始角度” 和 “结束角... 阅读全文
posted @ 2014-08-21 19:01 vajoy 阅读 (3141) | 评论 (4) 编辑
摘要:上篇文章我们了解了canvas的定义、获取和基础的绘图操作,其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形(Rectangle)和多边形的绘制。矩形的绘制一共有两个口令,分别是 ctx.fillRect(x, y, width, height) 和 ctx.stroke... 阅读全文
posted @ 2014-08-15 17:40 vajoy 阅读 (5842) | 评论 (6) 编辑
摘要:跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图:这里有点要提到的是,我们常规会将PC版的页面和移动端设备的页面独立开来设计,这样会让PC端的页面布局更灵活... 阅读全文
posted @ 2014-08-11 20:00 vajoy 阅读 (7571) | 评论 (43) 编辑
摘要:周老虎落网的时候,网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网(网易http://news.163.com/special/data_zyk/ ,腾讯http://news.qq.com/zt2014/zykgxw/index.htm),查看这俩页面,都是通过H5中canvas强大的绘图... 阅读全文
posted @ 2014-08-03 16:22 vajoy 阅读 (13845) | 评论 (7) 编辑

Copyright © 2014 - 2017 VaJoy Studio