大家好,最近在研究专注力的图片,想写个页面,总是不理想,将各个效果展示记录一下:小球移动效果:如图:动态图咋整上来呢?搞个说明图好了!
可以将代码复制,运行下,没什么特别注意的,就是js的jar包,记得引入!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球移动</title>
<script src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<div align="center">
<canvas id="canvas" width="500" height="500" style="background:#000;" >
your browser not support canvas
</canvas>
</div>
<script>
var x = 20;
var speed = 4;
//电脑的帧率是1秒钟60Hz, 就相当于一秒钟可以播放60张图片,就相当于播放一张图片使用16.7ms
function draw () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d'); //得到画笔
//1. 先把画布清空
context.clearRect(0, 0, canvas.width, canvas.height);
//2. 画小球
context.beginPath();
var gradien