jQuery ClickableCanvas デモページ5

jQuery ClickableCanvasの使い方

丸型メニューとアニメーションのサンプル　FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

なぜかChromeだけ角丸四角がまっ黒に？　shadowBlurをオフにすると正常に表示されるもよう。

動作確認：　Firefox3.6 IE8

サンプルのコード詳細 $(function() { /* Canvas要素を作成する親要素を指定 */ var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'home', type: 'circle', coords: { x: 80, y: 80, r: 50 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(25,25,112,0.3)', fillStyle: 'rgba(25,25,112,0.3)' }, textStyle: { content: 'Home', offset: [-40, 8], lineWidth: 1.0, fillStyle: '#FFFFF0', shadowBlur: 5, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, hoverStyle: { lineWidth: 0, strokeStyle: 'rgba(173,255,47,0.5)', fillStyle: 'rgba(173,255,47,0.5)', fadeSpeed: 300, transition: 'sinoidal' }, onClick: function(shape) { this.animateShape(shape, { endcoord: { x: 80, y: 60 }, duration: 50, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 80, y: 80 }, duration: 50, transition: 'sinoidal', afterFinish: function() { window.location.href = 'http://wiz-code.digick.jp/'; } }); } }); } }); canvasArea.createShape({ name: 'about', type: 'circle', coords: { x: 80, y: 190, r: 50 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(25,25,112,0.4)', fillStyle: 'rgba(25,25,112,0.4)' }, textStyle: { content: 'About', offset: [-32, 8], lineWidth: 1.0, fillStyle: '#FFFFF0', shadowBlur: 5, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, hoverStyle: { lineWidth: 0, strokeStyle: 'rgba(173,255,47,0.5)', fillStyle: 'rgba(173,255,47,0.5)' }, onClick: function(shape) { this.animateShape(shape, { endcoord: { x: 120, y: 190 }, duration: 200, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 40, y: 190 }, duration: 400, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 80, y: 190 }, duration: 200, transition: 'sinoidal' }); } }); } }); } }); canvasArea.createShape({ name: 'products', type: 'circle', coords: { x: 80, y: 300, r: 50 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(25,25,112,0.3)', fillStyle: 'rgba(25,25,112,0.3)' }, textStyle: { content: 'Products', offset: [-48, 8], lineWidth: 1.0, fillStyle: '#FFFFF0', shadowBlur: 5, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, hoverStyle: { lineWidth: 0, strokeStyle: 'rgba(173,255,47,0.5)', fillStyle: 'rgba(173,255,47,0.5)' }, onClick: function(shape) { this.animateShape(shape, { endcoord: { x: 120, y: 300, r: 80 }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 80, y: 300, r: 50 }, duration: 500, transition: 'sinoidal' }); } }); } }); canvasArea.createShape({ name: 'contact', type: 'circle', coords: { x: 80, y: 410, r: 50 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(25,25,112,0.3)', fillStyle: 'rgba(25,25,112,0.3)' }, textStyle: { content: 'Contact', offset: [-42, 8], lineWidth: 1.0, fillStyle: '#FFFFF0', shadowBlur: 5, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, hoverStyle: { lineWidth: 0, strokeStyle: 'rgba(173,255,47,0.5)', fillStyle: 'rgba(173,255,47,0.5)' }, onClick: function(shape) { this.animateShape(shape, { endcoord: { r: 100 }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { r: 0 }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { r: 50 }, duration: 500, transition: 'sinoidal' }); } }); } }); } }); var isFold = true; canvasArea.createShape({ name: 'rect', type: 'round-rect', coords: { x: 160, y: 40, w: 40, h: 40, r: 5 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(135,206,250,0.4)', fillStyle: 'rgba(135,206,250,0.4)' }, hoverStyle: { lineWidth: 0, strokeStyle: 'rgba(255,182,193,0.4)', fillStyle: 'rgba(255,182,193,0.4)' }, onClick: function(shape) { var endcoord1, endcoord2, e1 = { w: 450, h: 40 }, e2 = { w: 450, h: 410 }, e3 = { w: 40, h: 40 }; if (isFold) { endcoord1 = e1; endcoord2 = e2; } else { endcoord1 = e1; endcoord2 = e3; } this.animateShape(shape, { endcoord: endcoord1, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: endcoord2, duration: 500, transition: 'sinoidal', afterFinish: function() { isFold = !isFold; } }); } }); } }); });