html绘制一个六边形,Canvas-动态绘制六边形（多个六边形）

canvas

var canvas = document.getElementsByTagName("canvas")[0];

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

var canvas2 = document.getElementsByTagName("canvas")[1];

var context2 = canvas2.getContext("2d");

var offset;

var flag = true;

var offset2;

var flag2 = true;

function animate() {

var myAnimation = requestAnimationFrame(animate);

offset += (flag === true) ? 10 : -10;

if (offset >= 0) {

offset = 0;

}

if (offset <= -600) {

offset = -600

cancelAnimationFrame(myAnimation);

}

canvas.height = 156;

context.strokeStyle = "#000";

context.moveTo(66, 156);

context.lineTo(132, 104);

context.lineTo(132, 52);

context.lineTo(66, 0);

context.lineTo(0, 52);

context.lineTo(0, 104);

context.closePath();

context.setLineDash([600, 600]);

context.lineDashOffset = -offset;

context.stroke();

}

function animate2() {

var myAnimation2 = requestAnimationFrame(animate2);

offset2 += (flag2 === true) ? 10 : -10;

if (offset2 >= 0) {

offset2 = 0;

}

if (offset2 <= -600) {

offset2 = -600

cancelAnimationFrame(myAnimation2);

}

canvas2.height = 156;

context2.strokeStyle = "#000";

context2.moveTo(66, 156);

context2.lineTo(132, 104);

context2.lineTo(132, 52);

context2.lineTo(66, 0);

context2.lineTo(0, 52);

context2.lineTo(0, 104);

context2.closePath();

context2.setLineDash([600, 600]);

context2.lineDashOffset = -offset2;

context2.stroke();

}

canvas.addEventListener('mouseenter', function() {

offset = -600;

flag = true

animate();

})

canvas.addEventListener('mouseleave', function() {

flag = false;

})

canvas2.addEventListener('mouseenter', function() {

offset2 = -600;

flag2 = true

animate2();

})

canvas2.addEventListener('mouseleave', function() {

flag2 = false;

})