jQuery ClickableCanvasの使い方
カラーフェードのテスト FlashCanvas Pro使用 テストバージョンClickableCanvas.js ver 1.4
動作確認： Firefox3.6 Chrome7.0 IE8
サンプルのコード詳細 var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'ball', type: 'circle', coords: { x: 120, y: 300, r: 100 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(25,25,112,0.5)', fillStyle: 'rgba(25,25,112,0.5)' }, textStyle: { content: 'Ball', offset: [-25, 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: 600, r: 200 }, endcolor: { strokeStyle: 'rgba(178,34,34,0.5)', fillStyle: 'rgba(178,34,34,0.5)' }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 320, r: 50 }, startcolor: { strokeStyle: 'rgba(178,34,34,0.5)', fillStyle: 'rgba(178,34,34,0.5)' }, endcolor: { strokeStyle: 'rgba(154,205,50,0.5)', fillStyle: 'rgba(154,205,50,0.5)' }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 120, r: 100 }, startcolor: { strokeStyle: 'rgba(154,205,50,0.5)', fillStyle: 'rgba(154,205,50,0.5)' }, endcolor: { strokeStyle: 'rgba(25,25,112,0.5)', fillStyle: 'rgba(25,25,112,0.5)' }, duration: 500, transition: 'sinoidal' }); } }); } }); } }); canvasArea.createShape({ name: 'graph', type: 'arc', coords: { x: 500, y: 300, r: 80, start: 120, add: 120 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 0, strokeStyle: 'rgba(25,25,112,0.5)', fillStyle: 'rgba(25,25,112,0.5)' }, textStyle: { content: 'Graph', offset: [-75, 10], 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: 350, r: 200, start: 240 }, endcolor: { strokeStyle: 'rgba(178,34,34,0.5)', fillStyle: 'rgba(178,34,34,0.5)' }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 500, r: 80, start: 120 }, startcolor: { strokeStyle: 'rgba(178,34,34,0.5)', fillStyle: 'rgba(178,34,34,0.5)' }, endcolor: { strokeStyle: 'rgba(25,25,112,0.5)', fillStyle: 'rgba(25,25,112,0.5)' }, duration: 500, transition: 'sinoidal' }); } }); } }); canvasArea.createShape({ name: 'rr', type: 'round-rect', coords: { x: 50, y: 50, w: 135, h: 40, r: 5 }, attr: { shapeZIndex: 100, cursor: 'pointer' }, style: { lineWidth: 2.0, fillStyle: '#FFB6C1', strokeStyle: '#EEE8AA', shadowBlur: 5, shadowColor: '#000' }, textStyle: { content: 'メニュー', offset: [30, 28], fillOnly: true, fillStyle: '#FFF', shadowBlur: 5, shadowColor: '#000', shadowOffsetX: 2, shadowOffsetY: 2 }, hoverStyle: { lineWidth: 2.0, strokeStyle: '#F5F5DC', fillStyle: '#87CEFA', shadowBlur: 5, shadowColor: '#000' }, activeStyle: { lineWidth: 2.0, strokeStyle: '#F5F5DC', fillStyle: '#F00', shadowBlur: 5, shadowColor: '#000' }, onClick: function(shape) { this.animateShape(shape, { endcoord: { x: 280, y: 220, w: 320, h: 220 }, startcolor: { strokeStyle: '#EEE8AA', fillStyle: '#87CEFA' }, endcolor: { strokeStyle: '#F5F5DC', fillStyle: '#4B0082' }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { x: 50, y: 50, w: 135, h: 40 }, startcolor: { strokeStyle: '#F5F5DC', fillStyle: '#4B0082' }, endcolor: { strokeStyle: '#EEE8AA', fillStyle: '#FFB6C1' }, duration: 500, transition: 'sinoidal', afterFinish: function() { } }); } }); } });