jQuery ClickableCanvas デモページ１２

jQuery ClickableCanvasの設定方法

バージョン1.2から図形に楕円と扇形の楕円（4/24追加）を使用できるようにしました。楕円は図形タイプをellipseとし、座標コードは長方形（rect）を設定するときと同じパラメーター（x, y, w, h）です。 扇形の楕円は図形タイプをellipse-sectorまたはellipse-arcとします。長方形（rect）のプロパティに加えて、arcの固有プロパティ（start、end、add、anticlockwise）を指定します。
ver 1.4.3で楕円系のグラデーションができない不具合を直しました。楕円形の指定方法は長方形のもの（left,top,left-top,right-top）と同じです。
FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

動作確認：　Firefox3.6 IE8

サンプルのコード詳細 $(function() { var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'oval_shape1', type: 'ellipse', coords: { x: 50, y: 50, w: 200, h: 100 }, attr: { shapeZIndex: 5000 }, style: { lineWidth: 3.0, strokeStyle: '#6B8E23', fillStyle: '#9ACD32', shadowBlur: 1 }, hoverStyle: { lineWidth: 3.0, strokeStyle: '#00CED1', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#000' } }); canvasArea.createShape({ name: 'oval_shape2', type: 'ellipse', coords: { x: 300, y: 30, w: 100, h: 200 }, attr: { shapeZIndex: 5100 }, gradient: { startFrom: 'top', position: [0, 0.5, 1], color: ['#00BFFF', '#90EE90', '#FF69B4'], lineWidth: 5.0, strokeStyle: '#BC8F8F', shadowBlur: 1 }, onClick: function (shape) { this.animateShape(shape, { endcoord: { x: 280, y: 100, w: 350, h: 60 }, duration: 800, afterFinish: function() { this.animateShape(shape, { endcoord: { x: 300, y: 30, w: 100, h: 200 }, duration: 800 }); } }); } }); canvasArea.createShape({ name: 'oval_sector1', type: 'ellipse-sector', coords: { x: 50, y: 280, w: 260, h: 180, start: 120, end: 240 }, attr: { shapeZIndex: 5300 }, style: { lineWidth: 10.0, strokeStyle: '#B8860B', fillStyle: '#DAA520', shadowBlur: 1 }, onClick: function (shape) { var index, timer, message; this.animateShape(shape, { endcoord: { x: 130, y: 180, h: 280, w: 140, start: 30, end: 330 }, duration: 500, afterFinish: function() { index = 0; message = '遊ぼう！'; timer = setInterval(jQuery.proxy(function() { index++; this.setPropertyValue(shape, 'textStyle', { content: message.substring(0, index), offset: [130, 150], font: 'bold 30px "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); if (index >= message.length) { clearInterval(timer); index = 0; message = 'やなこった！'; this.animateShape('oval_sector2', { endcoord: { x: 460 }, duration: 500, transition: 'sinoidal', afterFinish: function() { timer = setInterval(jQuery.proxy(function() { index++; this.setPropertyValue('oval_sector2', 'textStyle', { content: message.substring(0, index), offset: [30, 100], font: 'bold 30px "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', textAlign: 'end', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); if (index >= message.length) { clearInterval(timer); message = ''; timer = setInterval(jQuery.proxy(function() { message += '・'; this.setPropertyValue(shape, 'textStyle', { content: message, offset: [130, 150], font: 'bold 30px "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); if (message.length >= 5) { clearInterval(timer); this.setPropertyValue('oval_sector2', 'textStyle', { content: '', offset: [30, 100], font: 'bold 30px "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); this.animateShape('oval_sector2', { endcoord: { x: 380 }, duration: 1500, transition: 'sinoidal' }); this.animateShape(shape, { endcoord: { x: 50, y: 280, w: 260, h: 180, start: 120, end: 240 }, duration: 1500, transition: 'sinoidal', afterFinish: function() { this.setPropertyValue(shape, 'textStyle', { content: '', offset: [130, 150], font: 'bold 30px "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); } }); } }, this), 300); } }, this), 100); } }); } }, this), 100); } }); } }); canvasArea.createShape({ name: 'oval_sector2', type: 'ellipse-sector', coords: { x: 380, y: 280, w: 130, h: 180, start: 150, end: 210, anticlockwise: true }, attr: { shapeZIndex: 5100 }, style: { lineWidth: 5.0, strokeStyle: '#006400', fillStyle: '#9ACD32', shadowBlur: 1 }, hoverStyle: { lineWidth: 3.0, strokeStyle: '#8B0000', fillStyle: '#F00', shadowBlur: 3, shadowColor: '#000' } }); });