jQuery ClickableCanvas デモページ3

jQuery ClickableCanvasの使い方

Internet Explorer8ではuuCanvas.jsおよびExplorerCanvas（特にExplorerCanvas！！）使用時のグラデーションがうまく実装されません。現在対策中です。

追記：10/11/18　ClickableCanvasのバージョン0.5で、FlashCanvasに対応しました。こちらを使用するとグラフのグラデーションが崩れずに表示されます。

グラデーション機能をテスト　FlashCanvas使用　ClickableCanvas.js ver 1.4

サンプルのコード詳細 $(function() { /* Canvas要素を作成する親要素を指定 */ var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'aaa', type: 'line', coords: [ { x: 300, y: 150 }, { x: 280, y: 250 }, { x: 380, y: 350 }, { x: 250, y: 450 } ], gradient: { startFrom: 'top', position: [0, 1], color: ['#F00', '#0FF'], lineWidth: 3.0, shadowBlur: 3, shadowColor: '#000' }, hoverStyle: { lineWidth: 3.0, strokeStyle: '#F00', shadowBlur: 3, shadowColor: '#000' } }); canvasArea.createShape({ name: 'bbb', type: 'sector', coords: { x: 500, y: 150, r: 80, start: 260, add: -250, anticlockwise: true }, gradient: { startFrom: 'left-top', position: [0, 0.75, 1], color: ['#A7D30C', '#019F62', 'rgba(1,159,98,0.7)'], shadowBlur: 3, shadowColor: '#000' }, activeStyle: { lineWidth: 2.0, fillStyle: '#F00', strokeStyle: '#0FF', shadowBlur: 3, shadowColor: '#000' } }); canvasArea.createShape({ name: 'ccc', type: 'rect', coords: { x: 50, y: 330, w: 170, h: 100 }, gradient: { startFrom: 'right-top', position: [0, 0.5, 1], color: ['#F00', '#FF0', '#0FF'], lineWidth: 2.0, fillStyle: '#CD5C5C', strokeStyle: '#EEE8AA', shadowBlur: 5, shadowColor: '#000' }, activeStyle: { lineWidth: 2.0, fillStyle: '#F00', strokeStyle: '#0FF', shadowBlur: 5, shadowColor: '#000' } }); canvasArea.createShape({ name: 'ddd', type: 'polygon', coords: [ { x: 150, y: 0 }, { x: 188, y: 110 }, { x: 304, y: 110 }, { x: 210, y: 180 }, { x: 246, y: 288 }, { x: 150, y: 220 }, { x: 58, y: 288 }, { x: 94, y: 180 }, { x: 0, y: 110 }, { x: 116, y: 110 } ], gradient: { startFrom: 'top', position: [0, 1], color: ['#F00', '#0FF'], shadowBlur: 3, shadowColor: '#000' }, hoverGradient: { startFrom: 'top', position: [0, 1], color: ['#0FF', '#F00'], lineWidth: 2.0, shadowBlur: 3, shadowColor: '#000' }, activeStyle: { lineWidth: 2.0, strokeStyle: '#00F', shadowBlur: 3, shadowColor: '#000' } }); canvasArea.createShape({ name: 'eee', type: 'circle', coords: { x: 540, y: 400, r: 50 }, gradient: { startFrom: 'right-top', position: [0, 0.5, 1], color: ['#F4F201', '#E4C700', 'rgba(228,199,0,0.5)'], shadowBlur: 3, shadowColor: '#000' }, activeStyle: { lineWidth: 2.0, strokeStyle: '#0FF', fillStyle: '#F00', shadowBlur: 3, shadowColor: '#000' } }); });

動作確認：　Firefox3.6 Chrome7.0 IE8