HTML5
文章平均质量分 88
There's no place like 127.0.0.1
刻刻帝丶
这个作者很懒,什么都没留下…
展开
-
HTML5多线程JavaScript解决方案Web Worker——专用Worker和共享Worker
不得不说,HTML5确实提供了大量强大的功能特性 甚至颠覆了我们之前理解的JavaScript单线程 它提供了JavaScript多线程的解决方案 这个新特性叫做Web Worker (在此之前没有多线程,setTimeout等本质仍然是单线程) 虽然是多线程编程 不过我们不用担心传统的多线程语言C++、Java等等遇到的多线程问题 下面我们就来看看什么是Web Worker工作线程专原创 2017-02-28 21:10:22 · 9764 阅读 · 2 评论 -
SVG(可缩放矢量图形)基本图形绘制方法与path路径命令
SVG(Scalable Vector Graphics)可缩放矢量图形 用于描述二维矢量图形的一种图形格式 它不是HTML5新增的 很早之前它就出现了 相比于canvas,它更适合作一些小图标icon等等 它的优点就是无论怎样放大,都不会模糊 canvas是js动态绘图,而svg是XML文档来描述绘图 svg-icon网址:传送门 下面我们来看一下如何使用svg绘图创建svg和ca原创 2017-01-15 15:12:37 · 7161 阅读 · 0 评论 -
SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio
SVG除了width和height这两个基本的宽高设置属性 还有两个更高级的属性 viewbox与preserveAspectRatio视区盒viewbox是svg标签上的属性 看下面的例子<svg width=300 height=300> <rect x=10 y=10 width=10 height=10></rect></svg>rect { fill: red;}原创 2017-01-15 16:51:21 · 2774 阅读 · 0 评论 -
SVG(可缩放矢量图形)绘制工具Method Draw
给大家介绍一个制作svg的工具 当我们在网页上要绘制一个非常复杂的svg图片的时候 可以借助于Method Draw工具进行绘制 绘制完毕后可以导出为代码拷贝到我们的项目当中 不需要下载,这是一个网页工具 工具地址:传送门 虽然这个网页bug很多 不过这依然是一个不错的工具画布点击画布,在页面的右侧我们可以调整画布属性点击属性,滚动滑轮可以微调 或者直接双击修改属性值工具栏左侧工具栏原创 2017-01-15 17:52:42 · 23169 阅读 · 5 评论 -
SVG(可缩放矢量图形)虚线相关属性与线条动画原理:一条会动的线
SVG可以实现非常酷炫的线条动画甚至是这样的网页 传送门我们可以先来实现一个简单的SVG线条动画 像这样不要着急,在此之前我们需要先了解一些属性值虚线属性虚线属性包括两个stroke-dasharray与stroke-dashoffsetstroke-dasharray大家来看下面的例子 <svg width=300 height=300 viewbox="0 0 30 30"> <pat原创 2017-01-15 22:08:04 · 11112 阅读 · 0 评论 -
SVG(可缩放矢量图形)图片添加、高斯模糊、渐变与g标签
今天主要谈一下SVG的特殊效果 其实和canvas都是差不多的,只不过是利用XML标签 用的不是很多但是以防以后万一用到还是整理一下图片添加svg中也可以添加图片<svg width=300 height=300> <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>注意这里原创 2017-01-17 14:00:52 · 3756 阅读 · 0 评论 -
移动端Touch事件与H5-Canvas像素点检测实现刮刮乐
最近又被支付宝的集福字刷屏了 我到底还是没看到敬业福ค(TㅅT) 心塞 今天给大家带来移动端的刮刮乐实现 效果就是这样的手滑动触发刮卡 当刮卡面积达到70%以上,自动刮开全部灰色图层 代码不是很多 全部代码就这些<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="wid原创 2017-01-19 21:47:53 · 7291 阅读 · 5 评论 -
HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是canvas技术绘制的图形画布创建canvas是html的一个标签 是一个图形容器 首先要在html页面添加一个canvas元素<canvas id="myCanvas" width=500 heig原创 2017-01-08 14:38:11 · 11016 阅读 · 0 评论 -
HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
上一篇文章我们了解了一些canvas基本图形绘制 下面我们再来看一些相关操作坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下 但是我们可以手动设置画布坐标轴变换 首先还是会获取“画布”和“画笔”<canvas id="myCanvas" width=500 height=500></canvas>var canvas = document.getElement原创 2017-01-08 21:01:57 · 3005 阅读 · 0 评论 -
HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 我们不仅仅可以绘制图形,还可以向画布中添加文字文字填充同样先获取元素对象与环境对象<canvas id="myCanvas" width=500 height=500></canvas>var canvas = document.getElementById('myCanv原创 2017-01-08 22:56:34 · 11520 阅读 · 0 评论 -
HTML5画布Canvas图片抽取、像素信息获取、命中检测
今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的 这个方法会将canvas的内容抽取为一张图片(base原创 2017-01-14 20:30:46 · 33138 阅读 · 6 评论