js通过canvas实现动画效果

最新推荐文章于 2024-07-21 02:40:53 发布

CodeEvil

最新推荐文章于 2024-07-21 02:40:53 发布

阅读量4.8k

点赞数 1

分类专栏： javascript的应用文章标签：动画 canvas javascript

本文链接：https://blog.csdn.net/m0_37907835/article/details/78962139

版权

博客探讨了在JavaScript中利用Canvas实现动画效果时的重要注意事项。提到Canvas的width和height属性直接影响坐标系尺寸，而CSS设置的宽高仅改变显示比例，不会影响坐标值，可能导致图像拉伸。

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

有个要注意的点，就是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:"white", 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)

最低0.47元/天解锁文章

CodeEvil

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js通过canvas实现动画效果

有个要注意的点，就是canvas标签本身自带width与height属性，设置此属性可以直接更改canvas坐标系的宽与高，而在css里设置宽高，只是把canvas坐标系拉伸了，坐标值不变，显示出来的图像也都被拉伸了。var canvas = document.getElementById("canvas");var parti = [];function loop(){
复制链接

扫一扫

专栏目录