jQuery+canvas实现简单的球体斜抛及颜色动态变换效
编程学习 2021-07-04 21:04www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery+canvas实现简单的球体斜抛及颜色动态变换效果,通过jQuery+html5的canvas利用时间函数进行实时数学运算动态绘制抛物线图形的技巧,需要的朋友可以参考下
本文实例讲述了jQuery+canvas实现简单的球体斜抛及颜色动态变换效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>canvas简单斜抛</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
var canvasHeight = 0;
var canvasWidth = 0;
var g = 9.8;
function Cast(context, castSettings) {
Cast.createColor = function () {
var r = Math.round(Math.random() * 256),
g = Math.round(Math.random() * 256),
b = Math.round(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
var _self = this;
// x, y, radian, r, v
$.extend(_self, castSettings);
_self.radian = _self.radian / 180 * Math.PI;
_self.vo = _self.v;
_self.vxo = Math.cos(_self.radian) * _self.vo;
_self.vyo = Math.sin(_self.radian) * _self.vo;
console.log("vyo:"+_self.vyo+":vxo:"+_self.vxo+":"+_self.radian);
_self.prevTime = new Date().getTime();
_self.xo = _self.x;
_self.yo = _self.y;
_self.cast = function () {
if (_self.x > canvasWidth - _self.r || _self.y > _self.yo) {
return;
}
var time = (new Date().getTime() - _self.prevTime) / 1000;
var x = _self.vxo * time;
var y = _self.vyo * time - 1 / 2 * g * time * time;
console.log(time+":"+_self.yo+":"+_self.xo+":"+y);
context.beginPath();
context.fillStyle = Cast.createColor();
context.arc(x + _self.xo, _self.yo- y , _self.r, 0, 2 * Math.PI);
context.fill();
context.closePath();
_self.x = x + _self.xo;
_self.y = _self.yo - y;
setTimeout(function () {
_self.cast();
}, 30);
}
_self.cast();
}
$(document).ready(function () {
var canvas = $("#canvas");
var context = canvas.get(0).getContext('2d');
canvasHeight = canvas.height();
canvasWidth = canvas.width();
new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 20 });
new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 30 });
new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 40 });
new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 50 });
new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 60 });
new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 70 });
});
</script>
<style type="text/css" >
h2 { color:Gray; line-height:50px; }
#canvas { background:#DDDDDD;}
</style>
</head>
<body>
<center>
<h3>canvas实现斜抛效果</h3>
<hr />
<canvas id="canvas" width="500" height="500"></canvas>
<hr />
</center>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》及《》
希望本文所述对大家jQuery程序设计有所帮助。