代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Document</title>
<style type="text/css">
body{
background-color:black;
overflow: hidden;
}
</style>
</head>
<body>
<canvas>
</canvas>
</body>
</html>
<script type="text/javascript">
var mycanvas = document.getElementsByTagName("canvas")[0];
var ctx = mycanvas.getContext("2d");
//动态获取窗口的大小
mycanvas.width = document.documentElement.clientWidth;
mycanvas.height = document.documentElement.clientHeight;
window.onresize = function(){
mycanvas.width = document.documentElement.clientWidth;
mycanvas.height = document.documentElement.clientHeight;
}
var BallsArr = [];
function Ball(x,y){
this.x = x;
this.y = y;
this.r = 30;
this.color = "rgba(" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + "," + 0.8;
this.dx = parseInt(Math.random() * 10) - 5;
this.dy = parseInt(Math.random() * 10) - 5;
BallsArr.push(this);
}
Ball.prototype.render = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI * 2,true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
Ball.prototype.update = function(){
this.x += this.dx;
this.y += this.dy;
this.r--;
if(this.r < 0){
this.godie();
}
}
Ball.prototype.godie = function(){
for (var i = 0; i < BallsArr.length; i++) {
if(BallsArr[i] == this){
BallsArr.splice(i,1);
}
};
}
mycanvas.onmousemove = function(event){
new Ball(event.clientX,event.clientY);
}
// 手指移动事件
mycanvas.addEventListener("touchmove",function(event){
event.preventDefault();
var finger = event.touches[0];
new Ball(finger.clientX,finger.clientY);
},true)
setInterval(function(){
ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
for (var i = 0; i < BallsArr.length; i++) {
BallsArr[i] && BallsArr[i].render();
BallsArr[i].update();
};
},20)
</script>测试地址：http://web0x01.com/test/color...
效果是手指滑动屏幕出现炫彩小球，PC端chrome浏览器的模拟iPhone都是正常的，还有安卓手机也是可以，就是iOS设备都不行。
