html5 canvas 不兼容safari浏览器-ag凯发k8国际

• html5 是最新的 html 标准；
• html5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
• html5 拥有新的语义、图形以及多媒体元素；
• html5 提供的新元素和新的 api 简化了 web 应用程序的搭建；
• html5 是跨平台的，被设计为在不同类型的硬件(pc、平板、手机、电视机等等)之上运行；

• 用于绘画的 canvas 元素；
• 用于媒介回放的 video 和 audio 元素；
• 对本地离线存储的更好的支持；
• 新的特殊内容元素，比如article、footer、header、nav、section；
• 新的表单控件，比如 calendar、date、time、email、url、search；

video 元素的三种视频格式：

• ogg：带有 theora 视频编码和 vorbis 音频编码的 ogg 文件；
• mpeg4：带有 h.264 视频编码和 aac 音频编码的 mpeg 4 文件；
• webm：带有 vp8 视频编码和 vorbis 音频编码的 webm 文件；

video 元素的属性：

• src：要播放的视频的 url；
• width：设置视频播放器的宽度；
• height：设置视频播放器的高度；
• autoplay：自动播放；
• controls：如果出现该属性，则向用户显示控件，比如播放按钮；
• loop：循环播放；
• preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

video 元素的方法：

• pause()：暂停当前播放的视频；
• play()：开始播放视频；
• load()：重新加载视频元素；
• canplaytype()：检测浏览器是否能播放指定的视频类型；
• addtexttrack()：向音频/视频添加新的文本轨道；

• html5 规定了在网页上嵌入音频元素的标准，即使用 元素；
• 元素能够播放声音文件或者音频流；

audio元素的三种音频格式：

• mp3：适用于internet explorer、chrome、safari 等浏览器；
• wav：适用于firefox、opera等浏览器；
• ogg：适用于firefox、ie9、chrome 浏览器；

audio元素的属性：

• src：要播放的音频的 url；
• autoplay：自动播放；
• controls：如果出现该属性，则向用户显示控件；
• loop：循环播放；
• preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

audio元素的方法：

• pause()：暂停当前播放的音频；
• play()：开始播放音频；
• load()：重新加载音频；

什么是 canvas？

• html5 的 canvas 元素通过 javascript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
• 创建一个画布

canvas在html5 中的新属性有：

• height：设置 canvas 的高度；
• width：设置 canvas 的宽度；

getelementbyid()：可返回对拥有指定 id 的第一个对象的引用；

getcontext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；

beginpath()：开始一条路径，或重置当前的路径；

moveto()：把路径移动到画布中的指定点，不创建线条。

lineto()：添加一个新点，然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)；

closepath()：创建从当前点到开始点的路径；

strokestyle属性：设置或返回用于笔触的颜色、渐变或模式；

stroke()：会实际地绘制出路径；

fillstyle属性：设置或返回用于填充绘画的颜色、渐变或模式；

fill()：填充当前的图像(路径)，默认颜色是黑色；

//空心三角形var canvas=document.getelementbyid("mycanvas");var cxt=canvas.getcontext("2d");cxt.beginpath();cxt.moveto(50,50);cxt.lineto(100,50);cxt.lineto(75,100);cxt.closepath();//填充或闭合 需要先闭合路径才能画cxt.strokestyle="red";cxt.stroke();//实心三角形cxt.beginpath();cxt.moveto(150,50);cxt.lineto(250,50);cxt.lineto(200,150);cxt.closepath();cxt.fillstyle="#89e1bf"cxt.fill();

演示图

图1

arc()：创建弧或曲线(用于创建圆或部分圆)；

演示图

图2

演示图

图3

strokerect()：绘制矩形(不填色)，笔触的默认颜色是黑色；

演示图

图4

fillrect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

演示图

图5

总结

以上是ag凯发k8国际为你收集整理的html5 canvas 不兼容safari浏览器_html5的介绍的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。