canvas渐变星空

最新推荐文章于 2024-06-28 16:03:48 发布

妮娜明颜颜

最新推荐文章于 2024-06-28 16:03:48 发布

阅读量902

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/jianajuan000/article/details/59136281

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我的渐变星空

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" style="border:1px solid black;margin:0 auto;display:block;">
浏览器不支持
</canvas>
<script>
window.οnlοad=function()
{
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");

canvas.width=800;
canvas.height=600;

//drawStar(cxt,150,300,400,400,0);

var skyStyle=cxt.createLinearGradient(0, 0,canvas.width,canvas.height);
/*skyStyle.addColorStop(0, "white");
skyStyle.addColorStop(0.1, "pink");
skyStyle.addColorStop(0.25, "yellow");
skyStyle.addColorStop(0.55, "yellowgreen");
skyStyle.addColorStop(0.65, "green");
skyStyle.addColorStop(0.8, "blue");
skyStyle.addColorStop(1.0, "black");*/
skyStyle.addColorStop(0.1, "black");
skyStyle.addColorStop(1.0, "#035");

cxt.fillStyle=skyStyle;
cxt.fillRect(0,0,0,canvas.height);

cxt.fillRect(0, 0, canvas.width,canvas.height);
//cxt.lineJoin="bevel";
//cxt.miterLimit=80;
//

//cxt.fillStyle="pink";
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();

for(var i=0;i<200;i++)
{
var r=Math.random()*5+5;
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height*0.65;
var a=Math.random()*360;
drawStar(cxt,r/2.0,r,x,y,a);
}
}
function drawStar(cxt,r,R,x,y,rot)
{
cxt.beginPath();
for(var i=0;i<5;i++)
{
cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);//横坐标前部分是角度转弧度，大圆半径暂定300，
cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}

cxt.closePath();
cxt.fillStyle="yellow";
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();}
</script>
</body>
</html>