javascript动态画⼼
<!-- javascript 动态画⼼ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
canvas{
background: lawngreen;//画布背景⾊
}
</style>
</head>
<body>
<canvas id="gycanvas" width="300" height="300" ></canvas>
<script>
//铺满屏幕
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
//初始化
var x0 = width/2;
var y0 = height/2;
var context = ElementById("gycanvas").getContext("2d");
context.fillStyle = "red"; 
var x,y;
//存储要画的点的位置和数量
var px=new Array(6000);
var py=new Array(6000);
//左边的点存3000 右边的点从3001开始存
var i=0;
var j=3001;
javascript动态效果
/
/将⼼的坐标存⼊数组中
for(var t=-3; t<=3; t=t+0.001)
{
//坐标系的 x,y
x=16*Math.pow(Math.sin(t),3);
y=s(t)-s(t*2)-s(t*3)-s(t*4);
//增⼤⼼
x=x*16;
y=y*16;
//算出对于计算机的坐标计算机左上⾓是0,0
x=x0+x;
y=y0-y;
//存⼊数组
if(x<x0)
{
px[i]=x;
py[i]=y;
i=i+1;
}
if(x>x0)
{
px[j]=x;
py[j]=y;
j=j+1;
}
//x等于0的点就⽆视了不影响⼤局
}
}
//画点
var stop;
var xin=0;
function drawxin()
{
context.fillRect(px[xin],py[xin],1,1);  xin=xin+1;
if(xin==6000)
{
//停⽌画⼼
clearInterval(stop);
}
}
//每⼗毫秒画⼀次
stop=setInterval(drawxin,1);
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。