快速转弯html5,【HTML5发射效果--会转弯】HTML5 Canvas 路径问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Draw a Circle

body {

background-color: #000000;

margin: 0px;

overflow: hidden;

}

varcanvas = document.createElement( 'canvas' ),

context = canvas.getContext( '2d' );

var canvasWidth = window.innerWidth;

canvasHeight = window.innerHeight;

var hue = 120;

var mylines = [];

var mylines2 = [];

//圈圈

var cycles = [];

var arry1 = [[1357.3581337957253,389.95216244936756],[1335.1900222318359,439.901328672196],[1555.1900222318359,805.901328672196]];

var myline = new MyLine(arry1,2,30,"#FFFFFF");

//var mycycle = new MyCycle(1335.1900222318359,439.901328672196,3);

mylines.push(myline);

//cycles.push(mycycle);

//alert(arry[0][0]);

init();

function init() {

document.body.appendChild(canvas);

canvas.width = canvasWidth;

canvas.height = canvasHeight;

setInterval(loop, 250);

}

function loop(){

hue += 0.5;

context.clearRect(0,0,canvas.width,canvas.height);

for(var mI = 0 ; mI < mylines.length ; mI++){

var myline = mylines[mI];

myline.draw();

myline.update();

}

for(var mI = 0 ; mI < mylines2.length ; mI++){

var myline = mylines2[mI];

myline.draw();

myline.update();

}

for(var my = 0 ; my < cycles.length ; my++){

var mycycle = cycles[my];

mycycle.draw();

mycycle.update(my);

}

}

//画一个拖尾巴的线

//该线存在起点和终点，长度，半径大小，颜色

function MyLine(arr,rad,len,color){

//this.arr = arr;

this.arrlen = arr.length;

this.startIndex = 1;

if(this.arrlen >= 2){

sx = arr[0][0];

sy = arr[0][1];

ex = arr[1][0];

ey = arr[1][1];

this.sx = arr[0][0];

this.sy = arr[0][1];

this.ex = arr[1][0];

this.ey = arr[1][1];

this.tx = this.sx;

this.ty = this.sy;

}

this.rad = rad;

this.len = len;

this.color = color;

this.xFlage = 0;

this.yFlage = 0;

//判断起始位置大小

if(sx <= ex){

this.xFlage = 1;

}else{

this.xFlage = 0;

}

if(sy <= ey){

this.yFlage = 1;

}else{

this.yFlage = 0;

}

//角度

this.angle = Math.atan2( ey - sy, ex - sx );

this.brightness = 50 + Math.random()*20;

//开始画

this.draw = function(){

context.beginPath();

context.fillStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';

//context.globalAlpha = 0.5;

for(var i = 0; i < this.len ; i++ ){

context.arc(this.tx,this.ty,((this.len - i)/this.len) * this.rad, 0, Math.PI*2, true);

this.tx -= Math.cos(this.angle) * this.len * 0.05;

this.ty -= Math.sin(this.angle) * this.len * 0.05;

}

context.closePath();

context.fill();

}

//更新

this.update = function(){

var tXF = 0;

var tYF = 0;

if(this.sx <= this.ex){

tXF = 1;

}else{

tXF = 0;

}

if(this.sy <= this.ey){

tYF = 1;

}else{

tYF = 0;

}

if(this.xFlage == tXF && this.yFlage == tYF){

this.sx += Math.cos(this.angle) * this.len * 0.8;

this.sy += Math.sin(this.angle) * this.len * 0.8;

}else{

//createCycle(this.ex,this.ey,this.color);

if((this.arrlen > 2) && ((this.startIndex+1) < this.arrlen)){

this.startIndex ++;

sx = arr[this.startIndex - 1][0];

sy = arr[this.startIndex - 1][1];

ex = arr[this.startIndex][0];

ey = arr[this.startIndex][1];

this.sx = sx;

this.sy = sy;

this.ex = ex;

this.ey = ey;

}else{

sx = arr[0][0];

sy = arr[0][1];

ex = arr[1][0];

ey = arr[1][1];

this.sx = arr[0][0];

this.sy = arr[0][1];

this.ex = arr[1][0];

this.ey = arr[1][1];

this.tx = this.sx;

this.ty = this.sy;

this.startIndex = 1;

}

this.angle = Math.atan2( ey - sy, ex - sx );

this.xFlage = 0;

this.yFlage = 0;

//判断起始位置大小

if(sx <= ex){

this.xFlage = 1;

}else{

this.xFlage = 0;

}

if(sy <= ey){

this.yFlage = 1;

}else{

this.yFlage = 0;

}

}

this.tx = this.sx;

this.ty = this.sy;

}

}

function createLine(sx,sy,ex,ey,rad,len,color){

myline2.push(new MyLine(sx,sy,ex,ey,rad,len,color));

}

//画圈圈

function MyCycle(x,y,rad,color){

this.sx = x;

this.sy = y;

this.rad = rad;

this.color = color;

this.draw = function(){

context.beginPath();

context.arc(this.sx,this.sy,this.rad, 0, Math.PI*2, true);

context.globalAlpha = (15 - this.rad )/12;

context.strokeStyle = this.color;

context.stroke();

}

this.update = function(index){

if(this.rad >= 15){

cycles.splice(index,1);

}else{

this.rad ++;

this.draw();

}

}

}

function createCycle(x,y,color){

cycles.push(new MyCycle(x,y,3,color));

}

//两点之间的距离

function calculateDistance( p1x, p1y, p2x, p2y ) {

var xDistance = p1x - p2x,

yDistance = p1y - p2y;

return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );

}

//产生随机色

function ramColor() {

return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);

}

本文是根据HTML5粒子发射效果进行的改造，需要的拿去，不过要注明转载的地址哦~~

想学习更多IT知识，请加QQ群【248716722】