第28章 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>js
// 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;
}效果图：
相关推荐
jinxiutong 2020-05-10
MIKUScallion 2020-02-22
songfens 2020-01-10
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06