js通过canvas实现动画效果

CodeEvil

于 2018-01-03 15:54:23 发布

阅读量4.9k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/m0_37907835/article/details/78962139

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有个要注意的点，就是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元/天解锁文章