html5 canvas 右键菜单,HTML5 Canvas 挂帘式导航菜单

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

var nav = function() {

var c = document.getElementById('canv');

var $ = c.getContext("2d");

var c1 = document.getElementById('c1');

var $1 = c1.getContext("2d");

var c2 = document.getElementById('c2');

var $2 = c2.getContext("2d");

var c3 = document.getElementById('c3');

var $3 = c3.getContext("2d");

var c4 = document.getElementById('c4');

var $4 = c4.getContext("2d");

c.width = window.innerWidth;

c.height = window.innerHeight;

$1.fillStyle = "hsla(321, 95%, 45%, 1)";

$1.font = "Bold 3em Poiret One";

$1.fillText("Link Item".split("").join(String.fromCharCode(0x2004)), 100, 50);

$2.fillStyle = "hsla(49, 95%, 55%, 1)";

$2.font = "3em Poiret One";

$2.fillText("Link Item".split("").join(String.fromCharCode(0x2004)), 100, 50)

$3.fillStyle = "hsla(195, 95%, 25%, 1)";

$3.font = "Bold 3em Poiret One";

$3.fillText("Link Item".split("").join(String.fromCharCode(0x2004)), 100, 50)

$4.fillStyle = "hsla(305, 100%, 25%, 1)";

$4.font = "Bold 3em Poiret One";

$4.fillText("Link Item".split("").join(String.fromCharCode(0x2004)), 100, 50)

var l1 = new Image()

l1.src = c1.toDataURL()

var l2 = new Image()

l2.src = c2.toDataURL()

var l3 = new Image()

l3.src = c3.toDataURL()

var l4 = new Image()

l4.src = c4.toDataURL()

/* draw() based on http://github.com/migurski/canvas-warp */

var draw = function(A, x1, y1, x2, y2, x3, y3, x4, y4) {

$.save();

$.transform(x2 - x1, y2 - y1, x3 - x1, y3 - y1, x1, y1);

$.beginPath();

$.moveTo(0, 0);

$.lineTo(0, 1.008);

$.lineTo(1.008, 0);

$.clip();

$.drawImage(A, 0, 0, 1, 1);

$.restore();

$.save();

$.transform(x3 - x4, y3 - y4, x2 - x4, y2 - y4, x4, y4);

$.beginPath();

$.moveTo(0, 0);

$.lineTo(1, 0);

$.lineTo(0, 1);

$.clip();

$.scale(-1, -1)

$.translate(-1, -1)

$.drawImage(A, 0, 0, 1, 1);

$.restore();

}

var ms = {

x: 0,

y: 0

}

var msdn = false;

var pts = [];

var vpts = [];

var itms = [];

var prevClik = "";

var w = {

x: 530,

y: 10

}

var coll = false;

var set = function(l, b, c, d, i) {

this.img = i;

this.p1 = l;

this.p2 = b;

this.p3 = c;

this.p4 = d;

var verlet = this;

this.disp = function() {

draw(verlet.img,

verlet.p1.x, verlet.p1.y,

verlet.p2.x, verlet.p2.y,

verlet.p3.x, verlet.p3.y,

verlet.p4.x, verlet.p4.y)

}

this.inner = function(c) {

c.beginPath();

c.moveTo(verlet.p1.x, verlet.p1.y);

c.lineTo(verlet.p2.x, verlet.p2.y);

c.lineTo(verlet.p3.x, verlet.p3.y);

c.lineTo(verlet.p4.x, verlet.p4.y);

c.closePath();

return c.isPointInPath(ms.x, ms.y);

}

}

var vskel = function(l, b) {

this.ptA = l;

this.ptB = b;

var dx = l.x - b.x;

var dy = l.y - b.y;

this.hyp = Math.sqrt(dx * dx + dy * dy);

var verlet = this;

this.resp = function() {

var dx = verlet.ptB.x - verlet.ptA.x;

var dy = verlet.ptB.y - verlet.ptA.y;

var h = Math.sqrt(dx * dx + dy * dy);

var diff = verlet.hyp - h;

var offx = (diff * dx / h) * .51;

var offy = (diff * dy / h) * .51;

verlet.ptA.x -= offx;

verlet.ptA.y -= offy;

verlet.ptB.x += offx;

verlet.ptB.y += offy;

}

}

var vPt = function(x, y) {

this.x = this.prevX = x

this.y = this.prevY = y

var verlet = this

this.pos = function(x, y) {

verlet.x = verlet.prevX = x;

verlet.y = verlet.prevY = y;

}

this.ref = function() {

var curX = verlet.x;

var curY = verlet.y;

verlet.x += verlet.x - verlet.prevX;

verlet.y += verlet.y - verlet.prevY;

verlet.prevX = curX;

verlet.prevY = curY;

}

}

var vSlot = function(x, y, links, w, h) {

pts.push(new vPt(x, y));

pts.push(new vPt(x + w, y));

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

pts.push(new vPt(x + w, y + (i * h) + h));

pts.push(new vPt(x, y + (i * h) + h));

}

vpts.push(new vskel(pts[0], pts[1]));

vpts.push(new vskel(pts[1], pts[2]));

vpts.push(new vskel(pts[2], pts[3]));

vpts.push(new vskel(pts[3], pts[0]));

for (i = 4; i < pts.length; i += 2) {

vpts.push(new vskel(pts[i - 1], pts[i - 2]));

vpts.push(new vskel(pts[i - 2], pts[i]));

vpts.push(new vskel(pts[i], pts[i + 1]));

vpts.push(new vskel(pts[i + 1], pts[i - 1]));

}

var inum = 0

itms.push(new set(vpts[0].ptA, vpts[1].ptA, vpts[3].ptA, vpts[2].ptA, links[inum]));

for (i = 4; i < vpts.length - 3; i += 4) {

inum++;

itms.push(new set(vpts[i].ptA, vpts[i + 1].ptA, vpts[i + 3].ptA, vpts[i + 2].ptA, links[inum]));

}

}

vSlot.prototype.disp = function() {

var t = pts.length;

var i;

pts[0].pos(30, 80);

pts[1].pos(w.x, w.y);

for (i = 1; i < t; i++) {

pts[i].y += .2;

pts[i].ref();

}

t = vpts.length;

for (var stiff = 0; stiff < 10; stiff++) {

for (i = 0; i < t; i++) {

vpts[i].resp();

}

}

$.clearRect(0, 0, c.width, c.height);

coll = coll == false ? true : false;

for (j = 0; j < itms.length; j++) {

itms[j].disp();

}

$.strokeStyle = "hsla(181, 95%, 45%, 1)";

for (i = 0; i < t; i++) {

$.beginPath();

$.moveTo(vpts[i].ptA.x, vpts[i].ptA.y);

$.lineTo(vpts[i].ptB.x, vpts[i].ptB.y);

$.stroke();

}

if (msdn) {

for (j = 0; j < itms.length; j++) {

if (itms[j].inner($)) {

prevClik = "Link #" + (j + 1) + " selected";

}

}

}

$.fillStyle = 'hsla(181, 95%, 45%, 1)';

$.font = "Bold 2em Poiret One";

$.fillText(prevClik.split("").join(String.fromCharCode(0x2004)), c.width / 2, c.height / 2);

window.requestAnimFrame(arguments.callee);

}

var run = function() {

var lnks = [l1, l2, l3, l4, l1, l2, l3, l4, l1, l2, l3, l4]

var l = new vSlot(150, 50, lnks, 400, 60);

setTimeout(l.disp, 50);

c.addEventListener("mousedown", function() {

msdn = true;

w.x += coll == false ? -5 : 5;

w.y += coll == false ? -5 : 5;

for (j = 0; j < itms.length; j++) {

if (itms[j].inner($)) {

prevClik = "Link #" + (j + 1) + " selected";

}

}

}, false);

c.addEventListener("mouseup", function() {

msdn = false

}, false);

}

c.addEventListener('mousemove', function(e) {

ms = {

x: e.pageX - this.offsetLeft,

y: e.pageY - this.offsetTop

}

//my hacky clickable region check for cursor update:

if (ms.x >= 250 && ms.x <= 300)

document.body.style.cursor = 'pointer';

else

document.body.style.cursor = 'default';

}, false);

run();

}

nav();

window.addEventListener('resize', function() {

c.width = window.innerWidth;

c.height = window.innerHeight;

}, false);