canvas雪景

最新推荐文章于 2023-11-22 17:14:37 发布

前端e站

最新推荐文章于 2023-11-22 17:14:37 发布

阅读量387

点赞数

分类专栏： canvas 文章标签：转载收藏

canvas 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

有个要注意的点，就是canvas标签本身自带width与height属性，设置此属性可以直接更改canvas坐标系的宽与高，而在css里设置宽高，只是把canvas坐标系拉伸了，坐标值不变，显示出来的图像也都被拉伸了。

<html>
<body>
<canvas id = "canvas" width = "800px" height="600px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var parti = [];
function loop()
{
    CreateParticles();
    UpdateParticles();
    KillParticles();
    DrawParticles();
}
 
function CreateParticles()
{
    var partis = {x:Math.random()*canvas.clientWidth, y:0 , color:"#2e7777", radius:2 + Math.random()* 5 ,speed:2+Math.random()*5};
    if(parti.length < 80)
    {
        parti.push(partis);
    }
}
 
function UpdateParticles()
{
    for(var i in parti)
    {
        parti[i].y += parti[i].speed;
    }
}
 
function KillParticles()
{
    for(var i in parti)
    {
        if(parti[i].y >= canvas.clientHeight)
        {
            parti[i].y = 0;
        }
    }
}
 
function DrawParticles()
{
    var contex = canvas.getContext("2d");
    contex.fillStyle = "#fff";
    contex.fillRect(0,0,canvas.clientWidth,canvas.clientHeight);
    for(var i in parti)
    {
        contex.beginPath();
        contex.arc(parti[i].x, parti[i].y,parti[i].radius,0,Math.PI * 2);
        contex.closePath();
        contex.fillStyle = parti[i].color;
        contex.fill();
    }
}
 
setInterval(loop,30);
</script>
</body>
</html>

前端e站

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas雪景

有个要注意的点，就是canvas标签本身自带width与height属性，设置此属性可以直接更改canvas坐标系的宽与高，而在css里设置宽高，只是把canvas坐标系拉伸了，坐标值不变，显示出来的图像也都被拉伸了。<html><body><canvas id = "canvas" width = "800px" height="600px">&l...
复制链接

扫一扫

专栏目录