: 1 , , 。
, , , ， ，
。 。
1. html
/span>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style type="text/css">
canvas{
border:1px solid blue;
}
style>
head>
<body>
<div>
<canvas id="canvas1" width="500" height="300">canvas>
div>
body>
html>
2.javascript ( html , js , )
function draw20(id) {
// canvas
var canvas = document.getElementById(id);
if (canvas == null){
return false
};
var context = canvas.getContext("2d");
//
var interal = setInterval(function () {
move(context)}, 4);
}
var x = 100;// X
var y = 100;// Y
//
var mx = 0;//0 1
var my = 0; //0 1
var mmx = 1;// x
var mmy = 1;// y
var radius = 5;//
var cw = 500;//canvas
var ch = 300; //canvas
function move(context) {
//
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 500, 300);
//
context.beginPath();//
context.fillStyle = "red";//
context.arc(x,y,radius,0,Math.PI*2,true);//
context.closePath();//
context.fill();//
//
if(x+radius>=cw){//
mx = 1;//
mmx = -1;
}
if(x<=radius){//
mx = 0;//
mmx = 1;
}
if(y+radius>=ch){//
my = 1;//
mmy = -1;
}
if(y <= radius){
my = 0;
mmy = 1;
}
x= x+mmx;
y = y+mmy;
}
draw20("canvas1");