HTML5_canvas制作——仿WIN7下冒泡屏保

最新推荐文章于 2022-11-04 07:41:24 发布

萧萧可乐

最新推荐文章于 2022-11-04 07:41:24 发布

阅读量2.8k

点赞数

分类专栏： HTML5 文章标签： html5 function border browser table string

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7689007

版权

这篇博客讨论了HTML5 Canvas实现的Win7冒泡屏保的性能优化。作者通过改进代码，减少了近20%的CPU负载，主要归因于减少对数组的遍历，转而采用对象控制模式。建议在不必要时避免数组遍历，优先使用index()方法定位值。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<script type="text/javascript" src="JS/JQ.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
body{background:url(images/img10.jpg) no-repeat fixed;}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div{margin:0; padding:0;}
body, input,select,textarea{color:#000; font:12px/1.8 "微软雅黑",Arial, Helvetica, sans-serif;}
img{border:0; vertical-align:middle;}
table{width:100%; border:0; border-collapse:collapse; border-spacing:0;}
ul,ol,li{list-style-type:none;}
a{color:#000; outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}
.contain{width:500px; margin:0 auto; padding-top:200px;}
</style>
<body>
<div class="contain">
<canvas id="myCanvas" height="300px" width="500px">your browser does not support the canvas tag </canvas>
</div>
</body>
<script type="text/javascript">
var canvas=$("#myCanvas").get(0);
var _canvas=$("#myCanvas").get(0).getContext("2d");
var _ifstart=false;
var _B_x=0;
var _B_y=0;
var locations=new Array();
function start(){
	var tool={
		_return_locations:function(){
			for(i=0;i<10;i++){
				var _x=Math.floor(Math.random()*450);	
				var _y=Math.floor(Math.random()*250);
				var _x_left=1;