本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于html5中Canvas屏保动画的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。话不多说直接上代码
1 2 3 4 5 6 7 8 9 10 11 |
|
因为项目需求,该动画中需要显示即时更新的数据,所以和普通的canvas画出来的不一样。但是又不能直接把html画到canvas中去,别着急有办法。
为了绘制 HTML 内容,你要先用<foreignObject>
元素包含 HTML 内容,然后再将这个 SVG 图像绘制到你的 canvas 中。
夸张地说,这里唯一真正棘手的事情就是创建 SVG 图像。您需要做的所有事情是创建一个包含XML 字符串的 SVG,然后根据下面的几部分构造一个 Blob
。
blob 对象的 MIME 应为 "image/svg+xml"。
一个
<svg>
元素。在 SVG 元素中包含的
<foreignObject>
元素。包裹到
<foreignObject>
中的(格式化好的) HTML。
如上所述,通过使用一个 object URL,我们可以内联 HTML 而不是从外部源加载它。当然,只要域与原始文档相同(不跨域),您也可以使用外部源。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
以下便是控制动画的显示位置和触发动画及关闭动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
|
相关推荐:
基于HTML5 Canvas和Rebound动画的Loading加载动画特效
用H5的canvas做恐怖动画
canvas与JS实现动态时钟动画
以上就是html5中Canvas屏保动画的实现代码的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《Canvas屏保动画》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者