第28章 canvas绘制动画

最新推荐文章于 2025-12-05 08:37:05 发布

最新推荐文章于 2025-12-05 08:37:05 发布 · 105 阅读

文章标签：

#javascript #ViewUI

阅-H52 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用HTML5 Canvas元素结合JavaScript实现简单的动画效果，包括背景填充、清除区域及移动绘制点。通过实例展示了动画的创建过程，帮助开发者理解和实践Canvas的动画应用。

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="28.js"></script>
<style type="text/css">
body{ margin:0; padding:0;}
</style>
</head>
<body onLoad="draw('canvas')">
<canvas id="canvas" width='400' height="400"></canvas>
</body>
</html>

// JavaScript Document
var context;
var width,height;
var i;
function draw(id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    width = canvas.width;
    height = canvas.height;
    setInterval(painting,100);
    i = 0;
}
function painting(){
//    context.fillStyle = "green";
//    context.fillRect(i,i,10,10);
//    context.fillRect(400-i,400-i,10,10);
//    context.fillRect(400-i,400-i,10,10);
//    context.fillRect(0,400-i,10,10);
    context.fillStyle = "green";
    context.fillRect(0,0,width,height);
    context.clearRect(10,10,width,height);
    context.fillStyle = "green";
    context.fillRect(i,20,10,10);
    i=i+20;
}

效果图：