jQuery ClickableCanvas デモページ4

jQuery ClickableCanvasの使い方

やはりInternet Explorer8ではuuCanvas.jsおよびExplorerCanvasを使用してもグラフが崩れます。テキスト表示も他のブラウザと位置がかなり異なるようです。 一方で、FirefoxとChrome、Operaの最新バージョンを見る限り大差なく実装されています。

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

角丸の長方形と、テキスト表示のテスト　ClickableCanvas ver 1.4

サンプルのコード詳細 $(function() { /* Canvas要素を作成する親要素を指定 */ var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'aaa', type: 'line', attr: { shapeZIndex: 100 }, 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, strokeStyle: '#333', shadowBlur: 3, shadowColor: '#000' }, hoverStyle: { lineWidth: 3.0, strokeStyle: '#F00', shadowBlur: 3, shadowColor: '#000' } }); canvasArea.createShape({ name: 'bbb', type: 'arc', attr: { shapeZIndex: 100 }, coords: { x: 150, y: 150, r: 80, start: 270, end: 140, anticlockwise: false }, textStyle: { content: 'グラフ１', offset: [-20, 45], font: 'bold 16px "Meiryo", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', lineWidth: 1.0, fillStyle: '#FFFFF0', shadowBlur: 2, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, gradient: { startFrom: 'right-top', position: [0, 0.75, 1], color: ['#A7D30C', '#019F62', 'rgba(1,159,98,0.7)'], lineWidth: 0.5, strokeStyle: '#6B8E23', fillStyle: '#9ACD32' }, activeStyle: { lineWidth: 0.5, fillStyle: '#F00', strokeStyle: '#0FF' } }); canvasArea.createShape({ name: 'ccc', type: 'arc', attr: { shapeZIndex: 100 }, coords: { x: 150, y: 150, r: 80, start: 140, end: 270, anticlockwise: false }, textStyle: { content: 'グラフ２', offset: [-70, -15], font: 'bold 16px "Meiryo", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', lineWidth: 1.0, fillStyle: '#FFFFF0', shadowBlur: 2, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, gradient: { startFrom: 'right-top', position: [0, 0.75, 1], color: ['#87CEFA', '#00BFFF', 'rgba(0,128,128,0.7)'], lineWidth: 0.5, strokeStyle: '#6B8E23', fillStyle: '#9ACD32' }, activeStyle: { lineWidth: 0.5, fillStyle: '#F00', strokeStyle: '#0FF' } }); canvasArea.createShape({ name: 'ddd', type: 'rect', attr: { shapeZIndex: 100 }, coords: { x: 50, y: 330, w: 170, h: 100 }, textStyle: { content: 'あア亜aA', offset: [15, 60], font: 'bold 32px "Meiryo", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', lineWidth: 1.0, fillStyle: '#FFF', shadowBlur: 3, shadowColor: '#000', shadowOffsetX: 1, shadowOffsetY: 1 }, 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: 'eee', type: 'round-rect', attr: { shapeZIndex: 100 }, coords: { x: 420, y: 80, w: 120, h: 180, r: 15 }, textStyle: { content: 'あア亜aA', offset: [5, 100], font: 'bold 24px "Meiryo", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', lineWidth: 1.0, fillStyle: '#ADFF2F', shadowBlur: 5, shadowColor: '#006400', shadowOffsetX: 1, shadowOffsetY: 1 }, gradient: { startFrom: 'left-top', position: [0, 0.5, 1], color: ['#F00', '#FF0', '#0FF'], lineWidth: 4.0, fillStyle: '#CD5C5C', strokeStyle: '#EEE8AA', shadowBlur: 5, shadowColor: '#000' }, hoverStyle: { lineWidth: 4.0, strokeStyle: '#FF6347', fillStyle: '#0FF', shadowBlur: 5, shadowColor: '#000' }, activeStyle: { lineWidth: 4.0, fillStyle: '#F00', strokeStyle: '#0FF', shadowBlur: 5, shadowColor: '#000' } }); });

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