绘制星空升级版（使用图形变换translate和rotate）

最新推荐文章于 2018-01-25 20:49:53 发布

妮娜明颜颜

最新推荐文章于 2018-01-25 20:49:53 发布

阅读量473

点赞数

分类专栏： canvas

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

版权

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;background:black;">
浏览器不支持,请更换浏览器！！！
</canvas>
<script>
window.οnlοad=function()
{
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");

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

for(var i=0;i<200;i++)
{
var r=Math.random()*10+10;
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;
drawStar(cxt,r,x,y,a);
}

function drawStar(cxt,r,x,y,rot)
{
cxt.save();
cxt.translate(x, y);
cxt.rotate(rot/180*Math.PI);

drawPath(cxt);
cxt.fillStyle="pink";
cxt.strokeStyle="#fd5";
cxt.lineWidth=3;
cxt.lineJoin="round";

cxt.fill();
cxt.stroke();
cxt.restore();
//startPath(cxt);
};
function drawPath(cxt)
{
cxt.beginPath();
for(var i=0;i<5;i++)
{
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*20, -Math.sin((18+i*72)/180*Math.PI)*20);
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20, -Math.sin((54+i*72)/180*Math.PI)*0.5*20);
}
}
cxt.closePath();
}

</script>
</body>
</html>

妮娜明颜颜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绘制星空升级版（使用图形变换translate和rotate）

浏览器不支持,请更换浏览器！！！ window.onload=function() { var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); canvas.width=800; canvas.height
复制链接

扫一扫

专栏目录