随笔分类 -  HTML5 / HTML

canvas-画图改进版
摘要：前几天在canvas——画板中做了个很简陋的画板，只能画简单的线条，可以选择颜色和线条粗度，今天在此简陋的画板上增加了新的形状，撤销，保存，橡皮擦等功能，虽然功能还是很简单，刚接触canvas，过程中还是遇到了很多困难。形状包括：铅笔、直线、直角矩形，圆角矩形、原型（利用圆角矩形能够画出很多其他好玩... 阅读全文
posted @ 2014-07-11 21:24 wishyouhappy 阅读(1908) 评论(2) 推荐(3)
canvas——画板
摘要：注意部分：canvas的height和width不能再css中设定，应该在html中设定，否则会影响页面的分辨率。效果图：图1：代码css：#canvas{ cursor: crosshair;}button{ width: 80px;}.yellowBtn{ background... 阅读全文
posted @ 2014-07-07 22:38 wishyouhappy 阅读(981) 评论(0) 推荐(0)
css3图片墙
摘要：css相关知识：1. 使用box-shadow设置图片阴影,为照片加上阴影eg： box-shadow: 0 0 5px 3px #abc2. 使用tansform-origin定义变形原点eg: -webkit-transform-origin: 0 1px3. 使用transform变形，常用变... 阅读全文
posted @ 2014-07-02 20:12 wishyouhappy 阅读(504) 评论(0) 推荐(0)
html5 canvas
摘要：The HTML5 element is used to draw graphics, on the fly, via scripting (usually JavaScript).1、本身没有外观，只是在文档中创建了一个画板，我们需要使用脚本来画图2、IE9前的浏览器不支持canvas3、使用c... 阅读全文
posted @ 2014-06-17 17:25 wishyouhappy 阅读(386) 评论(0) 推荐(0)
SVG
摘要：SVG: scalable vector graphics 1、使用XML定义图形 2、图像可伸缩，尺寸更小，放大或者是改变尺寸时图片质量不会有所损失 3、除了IE需要安装插件，其他浏览器都支持SVG文件 4、svg文件需以.svg后缀保存 5、svg文件可以通过标签嵌入html文档：、或... 阅读全文
posted @ 2014-06-16 21:30 wishyouhappy 阅读(494) 评论(0) 推荐(0)
文档坐标及元素坐标等
摘要：基本1、元素位置以像素度量，向右代表X坐标增加，向下代表Y坐标增加，X坐标和Y坐标可以相对于文档的左上角或者相对于其中显示文档的视口的左上角2、如果没有出现滚动条时（即文档比视口小时），文档和视口坐标系统是同一个，如果出现滚动条时两种坐标系间的转换需要加上或者减去滚动的偏移量（scroll offs... 阅读全文
posted @ 2014-06-11 11:46 wishyouhappy 阅读(668) 评论(0) 推荐(0)
动态生成目录
摘要：动态为生成目录，并为目录添加链接 阅读全文
posted @ 2014-06-10 18:06 wishyouhappy 阅读(853) 评论(0) 推荐(0)
跨站脚本（XSS）
摘要：跨站脚本: cross-site scripting或者XSS, 即攻击者向目标Web站点注入HTML标签或者脚本 如果网站没有通过移除任何嵌入的HTML标签来消毒，那么web页面很容易受到跨站脚本攻击简单例子：下面的js脚本时向用户say helloeg： http：//www.examp... 阅读全文
posted @ 2014-06-06 18:12 wishyouhappy 阅读(1076) 评论(0) 推荐(0)
JS线程模型&Web Worker
摘要：js线程模型客户端javascript是单线程，浏览器无法同时运行两个事件处理程序设计为单线程的理论是，客户端的javascript函数必须不能运行太长时间，否则会导致web浏览器无法对用户输入做出响应。这也是为什么Ajax的API都是异步的，以及为什么客户端Javascript不能使用一个简单的异... 阅读全文
posted @ 2014-06-05 08:24 wishyouhappy 阅读(2700) 评论(0) 推荐(2)
HTML5 Web socket和socket.io
摘要：what is websocketsTwo-way communication over ont TCP socket, a type of PUSH technology HTML5的新特性，用于双向推送消息（例如网页聊天，手机推送消息等） 原理：client利用regular http请求w... 阅读全文
posted @ 2014-05-19 17:35 wishyouhappy 阅读(5823) 评论(0) 推荐(1)
SSE及相关技术（web sockets, long polling等）
摘要：server-sent events--One Way Messaging 允许网页获得来自服务器的更新,并且自动更新Server-Sent Events: allow a web page to get updates from a serverThis was also possi... 阅读全文
posted @ 2014-05-17 15:57 wishyouhappy 阅读(1992) 评论(2) 推荐(0)
HTML5 Web Storage
摘要：简介HTML5 web storage, better than cookies.more secure and fasterdata store in name/value pairsthe storage limit is at least 5MB1. 发展过程：2. 浏览器支持情况：3. HT... 阅读全文
posted @ 2014-05-15 18:36 wishyouhappy 阅读(761) 评论(0) 推荐(0)
html幻灯效果页面
摘要：方式一： 1 2 3 4 方式二： ... 阅读全文
posted @ 2014-05-13 09:24 wishyouhappy 阅读(578) 评论(1) 推荐(0)
rowspan和colspan
摘要：1.说明rowspan：跨行colspan：跨列用于设计复杂的表格2.例子Insert title here ... 阅读全文
posted @ 2014-04-07 21:46 wishyouhappy 阅读(514) 评论(0) 推荐(0)
URL图片预览（createObjectURL）
摘要：1.说明1)createObjectURL 作用：创建url（creates a URL for the specified object）; 语法：var url = URL.createObjectURL(object,options); 参数说明：1）object可以包含下列类型：Blo... 阅读全文
posted @ 2014-04-06 12:50 wishyouhappy 阅读(3071) 评论(0) 推荐(0)
HTML5 datalist实现suggest功能
摘要：1.例子 HTML5 datalist tag 浏览器版本： datalist提供一个事先定义好的列表，通过id与input... 阅读全文
posted @ 2014-04-06 11:15 wishyouhappy 阅读(507) 评论(0) 推荐(0)