html5中Canvas屏保动画的实现代码

来源：动视网责编：小采时间：2020-11-27 15:04:39

html5中Canvas屏保动画的实现代码

html5中Canvas屏保动画的实现代码:本篇文章给大家带来的内容是关于html5中Canvas屏保动画的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。话不多说直接上代码<!DOCTYPE html> <html> <head> <meta charset="

推荐度：

点击下载本文 文档为doc格式

导读html5中Canvas屏保动画的实现代码:本篇文章给大家带来的内容是关于html5中Canvas屏保动画的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。话不多说直接上代码<!DOCTYPE html> <html> <head> <meta charset="

本篇文章给大家带来的内容是关于html5中Canvas屏保动画的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

话不多说直接上代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>
 <body style="height:760px">
 <canvas id="canvas" style="border:0px red solid;display:none">
 </canvas>
 </body>
 </html>

因为项目需求，该动画中需要显示即时更新的数据，所以和普通的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 而不是从外部源加载它。当然，只要域与原始文档相同（不跨域），您也可以使用外部源。

　　//创建画布
 var Cans=document.getElementById("canvas"); 
 var ctx=Cans.getContext("2d"); //设置全屏画布
 Cans.width=document.body.offsetWidth;
 Cans.height=document.body.offsetHeight; 
 var DOMURL,img,svg,url;
 initimg("AAA");//默认显示数据，一下代码参考https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
 function initimg(data) { 
 var data = '<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52">' +
 '<foreignObject width="100%" height="100%">' +
 '<p xmlns="http://www.w3.org/1999/xhtml" style="font-size:12px">' +
 '<p style="width:50px;height:50px;border:1px red solid">' +
 ''+data+'</p>' +
 '</p>' +
 '</foreignObject>' +
 '</svg>';
 DOMURL = window.URL || window.webkitURL || window;
 img = new Image();
 svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
 url = DOMURL.createObjectURL(svg);
 img.src = url;
 } 
 //每隔五秒刷新数据，随机从数组中取（实际情况当然是要从后台获取）
 var getdata = setInterval(function () { 
 var data=["BBB","CCC","DDD","EEE"]
 initimg(data[Math.floor(Math.random()*8)]);
 },5000)

以下便是控制动画的显示位置和触发动画及关闭动画

var raf; 
var arror = []; 
var running = false; 
//绘制图形
 function createStar() { 
 return {
 x: 0,
 y: 0,
 vx: 0.7,
 vy: 0.7,//用来控制移动速度
 draw: function() {
 ctx.drawImage(img, this.x, this.y);
 DOMURL.revokeObjectURL(url);
 }
 }
 } 
 //清除
 function clear() {
 ctx.fillStyle = 'rgba(255,255,255,1)';
 ctx.fillRect(0,0,canvas.width,canvas.height);
 } 
 //判断图形坐标是否超出画布范围
 function draw() {
 clear();
 arror.forEach(function(ball, i){
 ball.draw();
 ball.x += ball.vx;
 ball.y += ball.vy; 
 if (ball.y + ball.vy+50 > canvas.height || ball.y + ball.vy < 0) {
 ball.vy = -ball.vy;
 } 
 if (ball.x + ball.vx+50 > canvas.width || ball.x + ball.vx < 0) {
 ball.vx = -ball.vx;
 }
 });
 raf = window.requestAnimationFrame(draw);
 }
 
 canvas.addEventListener('click',function (e) {
 event.preventDefault();
 window.cancelAnimationFrame(raf); if(!running){
 Cans.style.display="none"
 document.onmousemove = document.onkeydown = document.onclick = null;
 clearTimeout(timer);
 clearInterval(getdata);
 clear();
 }else{
 running = false;
 bindevent(1);
 }
 }) 
 function loadpi() { 
 if (!running) {
 raf = window.requestAnimationFrame(draw);
 running = true;
 } var ball;
 ball = createStar();
 ball.x = canvas.width/2-25;
 ball.y = canvas.height/2-25; 
 arror.push(ball);
 document.onmousemove = document.onkeydown = document.onclick = null;
 clearTimeout(timer);
 } 
 var timer; 
 function bindevent(it) {
 clearTimeout(timer);
 timer = setTimeout(function () { 
 if(it==1){
 raf = window.requestAnimationFrame(draw);
 running = true;
 }else{
 Cans.style.display="block"
 loadpi();
 }
 }, 3000);
 }
 window.onload = document.onmousemove = document.onkeydown = document.onclick = function () {
 bindevent();
 }

html5中Canvas屏保动画的实现代码

推荐度：

点击下载本文 文档为doc格式

标签：屏幕保护动画实现

热门焦点

html5中Canvas屏保动画的实现代码

html5中Canvas屏保动画的实现代码

html5中Canvas屏保动画的实现代码

最新推荐

猜你喜欢

热门推荐