html四周环绕效果,HTML5 Canvas 圆弧动画片（绕四周运动）

HTML5 Canvas 圆弧动画(绕四周运动)

点击这里可以看到动画效果：

http://www.108js.com/article/article7/src/70206/Arcs1.html

欢迎访问博主的网站：http://www.108js.com

效果图：

代码：

HTML5 Canvas画圆

var canvas = document.getElementById("canvas");

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

var types = ["Arc2D.OPEN","Arc2D.CHORD","Arc2D.PIE"];

var CLOSE = 0;

var OPEN = 1;

var FORWARD = 0;

var BACKWARD = 1;

var DOWN = 2;

var UP = 3;

var aw=20;

var ah=20; // animated arc width & height

var x=30;

var y=30;

var angleStart = 45;

var angleExtent = 270;

var mouth = CLOSE;

var direction = FORWARD;

function step(w, h) {

// Compute direction

if (x+aw >= w-5 && direction == FORWARD ) direction = DOWN;

if (y+ah >= h-5 && direction == DOWN ) direction = BACKWARD;

if (x-aw <= 5 && direction == BACKWARD) direction = UP;

if (y-ah <= 5 && direction == UP ) direction = FORWARD;

// compute angle start & extent

if (mouth == CLOSE) {

angleStart -= 5;

angleExtent += 10;

}

if (mouth == OPEN) {

angleStart += 5;

angleExtent -= 10;

}

if (direction == FORWARD) {

x += 5; y = 30;

}

if (direction == DOWN) {

x = w-30; y += 5;

}

if (direction == BACKWARD) {

x -= 5; y = h-30;

}

if (direction == UP) {

x = 30; y -= 5;

}

if (angleStart == 0)

mouth = OPEN;

if (angleStart > 45)

mouth = CLOSE;

}

var canvas = document.getElementById("canvas");

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

var types = ["Arc.OPEN","Arc.CHORD","Arc.PIE"];

function render(w, h,context) {

// Draw Arcs

context.lineWidth=5;

for (var i = 0; i < types.length; i++) {

context.lineWidth=5;

context.strokeStyle="blue";

context.beginPath();

context.arc((i+1)*w/4,(i+1)*h/4, w/10, Math.PI/4,3*Math.PI/2,false)

if(i==1) context.closePath();

if(i==2) {

context.lineTo((i+1)*w/4,(i+1)*h/4)

context.closePath();

}

context.stroke();

context.fillStyle="gray";

context.fill();

}

context.save();

context.translate(x,y);

switch (direction) {

case DOWN : context.rotate(Math.PI/2); break;

case BACKWARD : context.rotate(Math.PI); break;

case UP : context.rotate(3*Math.PI/2);

}

context.beginPath();

//alert(y+"--"+angleStart);

context.arc(0,0,20,angleStart*Math.PI/180,angleExtent*Math.PI/180,false);

context.lineTo(0,0)

context.closePath();

context.fillStyle="blue";

context.fill();

context.restore();

}

var loop = setInterval(function () {

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

render(400, 400, context);

step(400,400);

}, 50);

// render(400,400,context);

热情奉献：HTML5 Canvas绘图与动画学习59例源码：

http://www.108js.com/example.html