【H5系列之svg】的更多相关文章

H5系列之svg

svg呢,跟canvas其实都是用来画图的,只不过svg画的图,是矢量图,矢量图有个特点是,放大缩小,不会失真,canvas呢,是逐像素进行渲染的. 也就是,他依赖分辨率,会根据分辨率来决定图形是否清晰,还有,svg他毕竟是dom元素,所以他能触发事件,canvas一旦图形被绘制完成,它就不会继续得到浏览器的关注. 首先,使用svg简单的来画一条线. 使用line标签,进行画线 使用rect标签画矩形 所有整个图形,画出来的,都带有填充的,如果我们只是想要矩形的,并不想要填充怎么办呢? 使用ci…

H5系列之History（必知必会）

H5系列之History(必知必会)   目录 概念 兼容性 属性 方法 H5方法       概念     理解History Api的使用方式 目的是为了解决哪些问题   作用:ajax获取数据时,可以改变历史记录,从而可以使用浏览器的后退和前进.   []   规范地址: http://www.w3.org/TR/html5/history.html     [01]History 对象   []Window对象的history属性引用的是该窗口的History对象.   []Histor…

h5 canvas与SVG的比较

画布 什么是canvas? HTML5的canvas标签使用JavaScript可以在网页上绘制图像,画布为一个矩形. 画布本身没有绘制能力,只能通过脚本来绘制. 画布例子: <canvas id="canvas" width="500px" height="500px"></canvas> <script type="text/javascript"> var canvas = docum…

H5 内联 SVG

HTML5 内联 SVG HTML5 画布 HTML5 画布 vs SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修…

H5 Canvas vs. SVG

HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SVG 中,每个被绘制的图形均被视为对象.如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形. Canvas Canvas 通…

H5系列之地理位置（必知必会）

H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.   HTML5 Geolocation API 允许我们对喜欢的网站共享我们的位置.JavaScript 可以捕获到纬度和经度,还可…

H5系列之video自己编写控制栏

首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一样的.例如: 在不同的浏览器上, 显示不同的控制栏,这在公司开发,是绝对不允许出现的效果的. 所以,我们可以通过js控制video的方法,来进行自定义控制栏. 播放与暂停(video上面的方法,play() 和 pause()) 效果图如下: 代码如下(有带注释): <!DOCTYPE html>…

H5系列之canvas

what is canvas?(什么是canvas) 其实他只是H5里面的一个标签而已,那么他作为一个标签,肯定有他的用途,他就像是一幅画布,等待着你来作画.可以说,他只是一个容器而已,需要配合着JavaScript来进行绘制. 那么他能做些什么东西呢? 例如这个:http://www.yyyweb.com/demo/tearable-cloth/index.html 还有这个:http://canvasrider.com/tracks/409068 用处很多,但是用的最多的还是,简单的画个图形…

H5系列之常用的语义元素

H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡另外一间房间,后天再睡另外一间房间, 是不是很乱呢?  的确是很乱,像我们的网页,比较复杂的网页,里面全都是用div来搭建,那怎么行呢,是不是有点分不清 这块区域是干嘛的, 那块区域是干嘛的?   所有才有了语义化的标签. 举几个常见的标签, ul li   这货一看,就知道他是列表吧.那么 img…

H5系列之drag拖放

H5中, 有个属性,draggable="true", 这个属性呢(默认false),需要加在标签上,加上去该标签就可以拖动了, 看下gif图吧 默认的标签,是不能拖动的,但是有两个标签是意外,img标签,和 a标签,默认就可以拖动. 浏览器兼容问题: w3c 是说 都支持, 但是据我实测, firefox 浏览器,在我这台机子上面是不支持的. 所以,使用的时候,注意一下,firefox 这个特殊的浏览器 好了,接下来,看看他还有些什么东西吧.拖拽div的时候,他身上能监听到三个事件…