html5新增标签

朴灿烈づ我的快乐病毒、 2021-12-01 10:46 550阅读 0赞

1、视频标签

  1. <sourcesrc="movie.mp4"type="video/mp4">
  2. <sourcesrc="movie.ogg"type="video/ogg">

video元素可以设置视频的播放、暂停、音量、尺寸。

1648343-20190716185603559-1182232802.png 1648343-20190716190400700-1650858729.png

2、音频标签

control 属性供添加播放、暂停和音量控件。

  

  

1648343-20190716190817420-116135866.png

1648343-20190716191017495-1048528347.png

3、绘制图形标签

canvas只是图形容器,图形的绘制必须是通过脚本来完成的。

canvas元素绘制一个画布(矩形框),默认canvas元素没有边框和内容。

1648343-20190716192544947-1389969339.png

(1)绘制矩形:

1648343-20190716193050954-1173200798.png 1648343-20190716193130059-1796222472.png

先获取canvas元素

再创建context对象,getContext(“2d”)对象是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

然后填充颜色,并设置填充范围

(2)绘制线条

moveTo(x,y)开始坐标 lineTo(x,y)结束坐标 stroke()绘制线条

1648343-20190716193934206-712052930.png 1648343-20190716194000468-550442316.png

(3)绘制圆形

arc(x,y,r,start,stop) stroke()或者fill()

1648343-20190716194434214-153044175.png 1648343-20190716194500661-1322401778.png

(4)绘制文本

fillText(text,x,y)在canvas上绘制实心的文本 strokeText(text,x,y)在canvas上绘制空心的文本

1648343-20190716195116246-1851963811.png 1648343-20190716195211891-378728890.png

1648343-20190716195359181-2115593162.png 1648343-20190716195422916-1962895272.png

(5)渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。

使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

1648343-20190716223026438-987495625.png 1648343-20190716223123878-1159357046.png

1648343-20190716225843810-1435063447.png 1648343-20190716225915586-1332641364.png

(6)将图像放在画布上 drawlmage(image,x,y)

1648343-20190716224357401-1323912171.png 1648343-20190716224434270-767002262.png

4、数学标记语言,基于XML的标准,用来在互联网上书写数字符号和公式的置标语言。

大部分主流浏览器都支持该标签。

1648343-20190717134805076-1857199911.png 1648343-20190717134844598-1823448763.png

转载于:https://www.cnblogs.com/heisetianshi/p/11197116.html

发表评论

表情:
评论列表 (有 0 条评论,550人围观)

还没有评论,来说两句吧...

相关阅读

    相关 HTML5新增标签属性

    关于h5 兜兜转转终于学完CSS开始接h5了!其实h5没有大家想的那么复杂!我们之前学的pc端就是以h5的标准来的 只是那些标签是 html4.01之前就有的!我们后