H5-canvas:小球来回移动 效果

大家好,最近在研究专注力的图片,想写个页面,总是不理想,将各个效果展示记录一下:小球移动效果:如图:动态图咋整上来呢?搞个说明图好了!

可以将代码复制,运行下,没什么特别注意的,就是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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值