×

关键词搜索结果:

HTML5中figure和figcaption标签用法

HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法。<figure><figure>标签规定独立的流内容(图像、图表、照片、代码等等)。figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流...

解析HTML5中hgroup元素

记得当初刚做了一套腾讯互娱乐部门的笔试题,针对LOGO,我用了hgroup这个标签,然后他们主管对我说,你连基本元素的用法都不知道。唉,现在想想觉得好可悲,今天晚上就想说说关于hgroup的应用,避免大家走入误区。hgroup是HTML5中新定义的元素,用来将标题和副标题群组。在我们已经有heade...

谈谈HTML5中的语义化标签:section和article

先前参加了几届webRuilder年会,每次都有关于HTML5相关的分享内容,近两次都谈到了H5的大纲算法,主要针对H5语义化标签的应用。HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section...

HTML5到底给我们带来了什么好处

当我们初识HTML5,可能很多人都不是了解它会给我们带来什么,也许只有慢慢从项目中才能体会出它的神奇。几乎每天我们都能发现新的关于传授和推广HTML5的资源和文章,我们也在HTML5boilerplate和HTML5Reset(尽管他们...

HTML5 Canvas的文本如何实现垂直对齐

垂直对齐,使用CSS很容易实现,如果想在HTML5Canvas中实现垂直对齐,如何设置呢,这就是今天要分享的笔记。HTML画布垂直对齐的文本,我们可以使用的textBaseline在画布范围内的属性值。textBaseline可以设置以下值之一...

HTML5 Canvas学习教程:概览

HTML5Canvas元素允许我们在HTML5页面中的canvas区域自由的绘制图形。让我们先来体验一下HTML5Canvas。点击“绘制”按钮,它将会在下面的canvas区域绘制一些图形。你的浏览器不支持HTML5Canvas!绘制在这个例子中只显示了一些基本的可以在HTML5Canva...

HTML5技术革命:迎接HTML5.1,展望HTML5.2

HTML5的到来,让互联网刮起一阵“飓风”,HTML5凭借语义性、兼容性和不需要第三方依赖的API迅速席卷了整个互联网,这是一场革命性的技术变革。随着谷歌浏览器的崛起,HTML5日渐成熟了,与此同时,我们即将迎接新的版本HTML5.1。据所知,HTML5.1的发布状态在8月中旬已经从“候选发布”提升...

玩转HTML5移动页面(动效篇)

作为一名前端,在拿到设计稿时你有两种选择:1.快速输出静态页面2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少。同时也会谈及移...

HTML5 Canvas:制作动画特效

要在HTML5canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果。这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然后快速的播放它们,在人的眼睛看来就是一个完整的动画效果。制作canvas动画的基本步骤下面是你在c...

HTML5 Canvas:绘制阴影和填充模式

我们可以在HTML5canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单,通过一些简单的设置,就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子:你的浏览器不支持HTML5Canvas!在canvas中,图形的阴影由2D上下文的4个属性来控制:shadowOffs...

HTML5 Canvas:图形转换

你可以对任何在HTML5canvas中绘制的图形应用转换效果。下面是可以使用的转换列表:移动旋转缩放移动我们可以将绘制在canvas上的任何图形进行移动操作。移动意味着要重新定位绘制的图形。下面是一个示例代码:var x = 100;var y&nbs...

HTML5 Canvas:绘图状态和状态栈

当我们在HTML5canvas中使用2D上下文来绘制图形的时候,2D上下文会处于某种状态中。你可以通过操纵2D上下文的属性来设置这些状态,例如fillStyle属性和strokeStyle属性。所有的这些操作被称为2D上下文的state(状态)。有时候,我们在canvas上绘制图形的时候,经常需要...

HTML5 Canvas:绘制渐变色

HTML5Canvas渐变是一种用于填充或描边图形的颜色模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。先来看几个canvas渐变色的例子:你的浏览器不支持HTML5Canvas!渐变按照类型来分可以分为两种类型:线性渐变径向渐变线性渐变以线性的模式来改变颜色,也就是水平,垂直或对角方向。...

HTML5 Canvas:合成模式

在我们前面所有HTML5canvas的例子中,图形的绘制都是一个图形位于另一个图形之上的。我们可以通过设置globalCompositeOperation属性来修改这个默认的行为。换句话来说,我们可以设置绘制的图形与已经绘制在canvas上的图形的合成模式。2D上下文有两个属性用于控制canvas...

HTML5 Canvas:像素处理

我们可以直接从HTML5canvas中获取单个像素。通过ImageData对象我们可以以读写一个数据数组的方式来操纵像素数据。当完成像素操作之后,如果要显示它们,需要将这些像素复制到canvas上。创建一个ImageData对象要创建一个ImageData对象,可以使用2D上下文的create...

HTML5 Canvas:绘制图片

通过前面的学习,我们现在已经可以在HTML5canvas中绘制图形和文字,并给它们设置一些样式。我们还可以在<canvas>中绘制图片。用于在<canvas>作为绘制源的图片可以是下面的几种元素类型:HTMLImageElement:可以是由Image()构造函数创建的图片...

HTML5 Canvas:绘制文字

我们可以在HTML5canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。要在canvas上绘制文字,可以通过2D上下文的...

HTML5 Canvas:获取canvas内容-toDataURL()

我们可以通过canvas的toDataURL()方法来获取绘制在HTML5canvas中的内容。做法类似下面的示例代码:var canvas  = document.getElementById("ex1");var dat...

HTML5 Canvas:绘制路径

一条HTML5canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线。路径可以用于在HTML5canvas上绘制各种类型的图形:直线、圆形、多边形等等。路径的绘制是canvas的核心,必须很好的理解和掌握。开始和关闭一条路径要开始和关闭一条路径可以使用2D上下文的begi...

HTML5 Canvas:绘制矩形

不论你在HTML5canvas上绘制什么图形,有两个属性是你必须设置的:描边属性-stroke填充属性-fill填充属性和描边属性决定如何来绘制图形。stroke是图形的外轮廓边框。fill则是图形的填充颜色。下面是一个简单的例子,在Canvas中绘制了一个蓝色边框和绿色填充的矩形(实际上这是两个...

如何实现跨浏览器的HTML5表单验证

HTML5的出现,给表单带来了新的生机,不仅添加了很多类型的表单,而且还自带验证的功能。在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,比如iphone弹的键盘,如下图:但是由于不同的浏览器对不合法输入提示文案不一致,样式也不一样,并且老的浏览器不兼容(IE9及以下),导致了在生产环...

HTML5和jQuery制作网页灰度图片悬浮效果

网页制作web前端之家文章简介:HTML5和jQuery的灰度图片悬浮效果.在这个教程中,作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuery的黄...

Flash该何去何从,真的要被HTML5取代了吗?

上图是2016近7个月浏览器的使用情况,从图上反应出谷歌浏览器的使用量比例越来越大了。说明H5的时代到来了?今早看到中关村在线发布一篇文章“Flash狗带!Chrome于12月全面转向HTML5”,上面提到谷歌公布了Chrome浏览器逐步取消对Flash的详细计划。谷歌表示,从2016年9月的Chr...

Jquery文件上传插件:Jquery HTML5 uploader

网页制作web前端之家文章简介:Jqueryhtml5uploader插件使用笔记.Jqueryhtml5uploader是Jquery的一个文件上传插件,支持拖拽上传,但要求浏览器...

如何基于HTML5实现数据统计饼图动画特效

每次写篇文章,都要花几个小时【文笔不好】,虽然比较累,如果有着不错的点击率和大家的回复,累点也值了,(┬_┬)。前段时间做了一个“英国会不会脱欧”的活动页面,设计师设计了一个饼图的数据统计效果,要求实现完整效果,并且要兼容IE7+和其他主流浏览器。每次提到统计图,首先会考虑现在最流行的两种插件:H...