-
2017-02-27 15:16:59
- SVG（可缩放矢量图形）虚线相关属性与线条动画原理：一条会动的线
- SVG可以实现非常酷炫的线条动画甚至是这样的网页 传送门我们可以先来实现一个简单的SVG线条动画 像这样不要着急，在此之前我们需要先了解一些属性值虚线属性虚线属性包括两个stroke-dasharray与stroke-dashoffsetstroke-dasharray大家来看下面的例子
-
3885
-
2017-02-27 15:18:49
-
2017-02-27 15:22:20
- HTML5优化Web动画—requestAnimationFrame
- 在页面中实现动画，我们有很多选择 可以使用CSS3的transition CSS3中的animation配合keyframes规则 SVG中也可以使用SMIL-animation 最原始的方法就是我们利用JavaScript的setTimeout/setInterval来实现动画 不过现在我们又多了一种方法 requestAnimationFrame优势requestAnimationF
-
2098
-
2017-02-27 15:25:40
-
2017-02-27 15:28:06
-
2017-02-27 15:32:20
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
- HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏、图表等等 或者绘制各种酷炫的东西 这里给大家分享一个网站 传送门 里面都是canvas技术绘制的图形画布创建canvas是html的一个标签 是一个图形容器 首先要在html页面添加一个canvas元素
-
3645
-
2017-02-27 15:34:55
- HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
- 上一篇文章我们了解了一些canvas基本图形绘制 下面我们再来看一些相关操作坐标轴变换我们画布中默认的坐标轴与浏览器坐标轴相同 x正半轴朝右 y正半轴朝下 但是我们可以手动设置画布坐标轴变换 首先还是会获取“画布”和“画笔”var canvas = document.getElement
-
3197
-
2017-02-27 15:38:18
- HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式
- CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 我们不仅仅可以绘制图形，还可以向画布中添加文字文字填充同样先获取元素对象与环境对象var canvas = document.getElementById('myCanv
-
3118
-
2017-02-27 15:41:09
- HTML5画布Canvas图片抽取、像素信息获取、命中检测
- 今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的 这个方法会将canvas的内容抽取为一张图片（base
-
4405
-
2017-02-27 15:55:33
- HTML5—新语义元素使用及兼容
- 1.新语义元素：HTML5提供了新的语义元素来明确一个Web页面的不同部分。：描述了文档的头部区域，于定义内容的介绍展示区域：定义导航链接的部分。：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。：定义独立的内容。：定义页面主区域内容之外的内容（比如侧边栏）。：标签规定独立的流内
-
1894
