HTML5
;
一个憨厚的前端小码农,一个天天在朋友圈分享编程知识(主要是前端)的忠实码农。
展开
-
HTML5多媒体
HTML5图像<img>标签(空元素) 属性:alt text 必需,图像的替换文本 src URL 必需,图像的URL height width usemap URL 将图像定义为客户端图像映射 *由于图像是独立文件存在的,如果某个HTML5文件包含10个图像,要...原创 2018-07-21 13:45:50 · 588 阅读 · 0 评论 -
JavaScript实现元素的拖放
了解:以前的web应用程序中通过mousemove或者mouseup等原来的事件来实现模拟拖放(drop&drag)功能。但是在HTML5中已经将实现拖放功能事件来实现拖放功能事件与API标准化,可以简单的实现以前要花费大量代码才能实现的功能。HTML5的拖放,不仅可以通过鼠标移动浏览器中显示的Web部件,还可以将桌面上的文件拖放到浏览器中。这就是显著的提高了web应用程序界面便利...原创 2019-02-27 19:13:06 · 524 阅读 · 1 评论 -
Video&Audio(实例篇)
1、在Canvas上绘制视频影像首先,实现在Canvas上实时传送并显示视频的功能。画面上分别拥有播放视频的video标签以及canvas标签,并赋值ID。根据视频的高度和宽度适当的进行缩小放大绘制在canvas。第一种方法使用setTimeout()或者setInterval()来实现,第二种方法使用drawImage()方法在canvas中进行视频影像绘制,但是在Firefox3.6之...原创 2019-01-30 18:56:33 · 737 阅读 · 0 评论 -
Video&Audio(进阶篇)
在HTML5中可以很轻松的处理视频与音频,在HTML5中不仅可简单的播放视频/音频,而且可方便的进行变速播放,方向播放,等等。尤其是可将Canvas与视频进行结合,大大扩展显示效果。在HTML5中进行音频与视频的处理时,几乎可以使用相同的属性与方法。 在没有HTML5以前,在页面中播放视频时必须通过Flash插件。HTML4中只能通过插件才能处理视频与音频。对于iPhone、...原创 2019-01-30 11:28:13 · 591 阅读 · 0 评论 -
Canvas画布实现动画效果
1、圆球跳动的动画<!doctype html><html><head><meta charset="utf-8"><title>圆球跳动的动画</title></head><body><canvas id="canvas原创 2019-01-25 15:53:04 · 1575 阅读 · 0 评论 -
Canvas画布进阶篇---绘制文本
1、描绘文本概述文本绘制相关的方法 方法 说明 context.fiilText(text,x,y) 描绘文本 context.fillText(text,x,y,maxWidth) context.strokeText(text,x,y) 描绘文本的轮廓 context.strokeText(text,x,y,maxWidth) fill...原创 2019-01-25 12:16:51 · 1281 阅读 · 0 评论 -
Canvas画布进阶篇
HTML5的Canvas中提供了路径旋转、移动、扩大/缩小等变形功能。1、变形方法 在制作动画或绘制复杂的图形时,经常会用到两个变形方法transform()以及rotate()。在实际绘制前执行了这些方法后,实际绘制出来的图形中将显示旋转或变形。变形方法中的旋转/移动相关方法 setTransform(m11,m12,m21,m22,dx,dy) 变形矩阵的指定(清空...原创 2019-01-24 16:29:25 · 1774 阅读 · 0 评论 -
Canvas画布进阶篇------绘制图像
Canvas中可以读入JPG或PNG等图像,而且还可以进行尺寸修改、图像截取等操作。图像绘制的基本步骤如下:(1)读取图像文件(2)在Canvas中进行绘制图像读取前,首先创建Image对象,在Image对象的src属性中指定图像文件所在路径(URL)后就可以开始读取了。读取结束后,触发onload事件。基本语法下:var image=new Image();image....原创 2019-01-14 13:29:35 · 1365 阅读 · 0 评论 -
Canvas画布进阶篇
Canvas画布绘制方法arc()方法------画圆弧context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);从指定的开始角度开始至结束角度为止,按指定方向进行圆弧绘制。最后的参数为true时,按逆时针旋转。角度不是“度”,而是“弧度”。转换公式:var rad(弧度)=deg(度)*Math.PI/180;简单案例:<!doctype html...原创 2019-01-13 12:07:53 · 258 阅读 · 0 评论 -
Canvas画布基础篇
Canvas是用于在Web画面中绘制位图的技术。当HTML4版本的网页中需要绘制图形时,必须使用Flash等插件,在有了Canvas以后,就在也不需要任何插件,只需要JavaScript就可以在页面上绘制图形了。Canvas进行绘制的基本步骤(1)取得Canvas对象(2)从Canvas对象中获取绘图用的上下文(3)使用上下文中的方法与属性进行绘制1、获取Canvas对象,为了...原创 2019-01-12 11:55:58 · 371 阅读 · 0 评论 -
Canvas模拟时钟
<!doctype html><html><head><meta charset="utf-8"><title>模拟时钟</title><style type="text/css"> body{ text-align: center; } canvas{原创 2019-01-17 15:07:47 · 240 阅读 · 0 评论 -
HTML特殊字符对照表
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915; Δ &Delta; &#...转载 2019-03-08 08:02:36 · 248 阅读 · 0 评论