ウィザード・コード

jQuery ClickableCanvas バージョン２ デモページ

Clickable Canvas.js（ベータ版ver 2.1）

バージョン2.1でバグ修正と新機能を追加しました。詳細とデモはこちらへ

スクリプトの利用規約はこちらのページです。

バージョン2.0 バージョン2.1（6/19更新）は、よりシンプルで軽いプラグインにするべく、前バージョンを大幅に書き直したものです。そのため、前バージョンのver 1.x以下との互換性をあまり考慮に入れていません。そのため、前バージョンで使用したスクリプトをこのバージョンで使用すると不具合を起こす可能性があります。

前バージョンとの主な変更点
・同一ページ内の複数のCanvas要素にプラグインを適用可に
・多種多様なイージング関数を導入
・画像に枠線を入れられる仕様に変更
・アニメーションで枠線の太さも変えられるように変更
・FPSを変更可能に
・自由度を下げる元になっていたFlashCanvasやuuCanvas関連の内部スクリプトを削除。描画コンテクスト準備まではユーザーに委ねる仕様に
・createShapeメソッドの引数を次の四つに変更。図形名、図形タイプ、座標、オプション（ハッシュ形式）。必須項目については引数として渡す
・ATTRプロパティを廃止し、その直下で管理していたプロパティ（zindexなど）はすべてSHAPEオブジェクト直下に編入
・いくつかのプロパティ名を変更。ほとんどはキャメルタイプのつづりから小文字のみに変更するパターン。shapeZIndex⇒zindex、visibility⇒visible、coordMode⇒coordmode
・オプションで指定できるパラメータは、zindex、image、visible、cursor、coordmode、sensitivity、style、hoverStyle、activeStyle、gradient、hoverGradient、activeGradient、onMouseMove、onMouseOver、onMouseDown、onClick、onDblClick、onCanvasOut
・fontやshadowBlurなど数値やデータを頻繁に更新しないプロパティについてはstyleプロパティ内で指定します
・imageとtextStyleのoffsetプロパティを廃止し、x、yプロパティにそれぞれの座標を指定する仕様に変更
・枠線を描画したくない場合や、図形に色をつけたくない（透明にしたい）ときは、strokeStyleまたはfillStyleにrgba(0,0,0,0)を指定する
・Firefoxの最新バージョン（ver 12.0）では、確認したところ楕円の扇形を描画する際、枠線が変形されずに描画される現象が起きます（デモ２参照）。以前のバージョンでは発生しなかったと思うので、Firefox特有の問題だと思います。解決策としては苦肉の策ですが枠線を透明にすることで対策することは可能です

FlashCanvas Pro使用　ClickableCanvas.js ver 2.1

動作確認：　Firefox12.0 Chrome19.0 beta IE9

サンプルのコード詳細 jQuery(function() { var canvas = jQuery('#canvas'), canvas2 = jQuery('#canvas2'); /* IE8以下のブラウザ対策 */ if (!jQuery.support.opacity && typeof FlashCanvas !== 'undefined') { FlashCanvas.initElement(canvas.get(0)); FlashCanvas.initElement(canvas2.get(0)); } /* プラグイン初期化 */ canvas.clickableCanvas({fps: 30}), canvas2.clickableCanvas(); /* デモ１の図形 */ canvas.createShape('line1', 'line', [ {x: 200, y: 50}, {x: 350, y: 100}, {x: 400, y: 20}, {x: 430, y: 80} ], { zindex: 1, style: { lineWidth: 5, shadowBlur: 5, shadowColor: '#333', shadowOffsetX: 2, shadowOffsetY: 2 }, hoverStyle: { strokeStyle: '#F00', fillStyle: '#F00' }, onClick: function (s, c, t) { this.animateShape('line1', { endlinewidth: 15, endcolor: { strokeStyle: '#999' }, endcoord: [ {x: 100, y: 10}, {x: 280, y: 120}, {x: 350, y: 50}, {x: 500, y: 160} ], easeType: 'easeInQuart', afterFinish: function () { this.animateShape('line1', { endlinewidth: 5, endcolor: { strokeStyle: '#000' }, endcoord: [ {x: 200, y: 50}, {x: 350, y: 100}, {x: 400, y: 20}, {x: 430, y: 80} ], easeType: 'linear' }); } }); } }); canvas.createShape('round-rect1', 'round-rect', {x: 50, y: 360, h: 80, w: 200, r: 5}, { zindex: 2, style: { lineWidth: 2 }, gradient: { strokeStyle: '#F00', startFrom: 'right-top', color: ['#F00', '#FF0', 'rgba(0,255,255,0.8)'], position: [0, 0.5, 1] }, hoverGradient: { strokeStyle: '#00F', startFrom: 'right-top', color: ['rgba(0,255,255,0.8)', '#FF0', '#F00'], position: [0, 0.5, 1] }, activeGradient: { strokeStyle: '#0FF', startFrom: 'left-top', color: ['#F00', '#FF0', 'rgba(0,255,255,0.8)'], position: [0, 0.5, 1] }, textStyle: { x: 30, y: 50, content: 'あああああああ', font: '20px "Meiryo", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Osaka", "Verdana", "arial", "sans-serif"', strokeStyle: 'rgba(0,0,0,0)', fillStyle: '#FFF', shadowBlur: 2, shadowColor: '#000', shadowOffsetX: 2, shadowOffsetY: 2 } }); /* 図形をコピーする例 */ canvas.copyShape('round-rect1', 'round-rect2', { coords: {x: 280, y: 360, h: 80, w: 200, r: 5} }); canvas.createShape('rect1', 'rect', {x: 80, y: 140, h: 160, w: 200}, { zindex: 3, style: { strokeStyle: '#555', fillStyle: '#FF0', lineWidth: 5 }, hoverStyle: { lineWidth: 15, strokeStyle: '#FFF', fillStyle: '#F0F', fadeSpeed: 300, easeType: 'easeInCubic' }, activeStyle: { lineWidth: 30, strokeStyle: '#00F', fillStyle: '#0FF' } }); canvas.createShape('sector1', 'sector', {x: 540, y: 300, start: 30, end: 120, r: 80}, { zindex: 4, style: { strokeStyle: '#CCC', fillStyle: '#FF0', lineWidth: 2 }, gradient: { strokeStyle: '#F00', startFrom: 'right-bottom', color: ['#F00', '#FF0', 'rgba(0,255,255,0.8)'], position: [0, 0.5, 1] }, hoverGradient: { strokeStyle: '#00F', startFrom: 'right-bottom', color: ['#FF0', '#F00', '#0FF'], position: [0, 0.5, 1] }, activeGradient: { strokeStyle: '#F0F', startFrom: 'right-bottom', color: ['#00F', '#0FF', '#F0F'], position: [0, 0.5, 1] }, onClick: function () { this.animateShape('sector1', { endlinewidth: 5, endcoord: {start: 90, end: 360, r: 80} }); } }); canvas.createShape('ellipse1', 'ellipse', {x: 320, y: 140, w: 120, h: 50}, { zindex: 20, style: { lineWidth: 2 }, gradient: { strokeStyle: '#F00', startFrom: 'top', color: ['#F00', '#FF0', 'rgba(0,255,255,0.8)'], position: [0, 0.5, 1] }, hoverGradient: { strokeStyle: '#FF0', startFrom: 'top', color: ['#FF0', '#F0F', '#0FF'], position: [0, 0.5, 1] }, activeGradient: { strokeStyle: '#0FF', startFrom: 'top', color: ['#0FF', '#0F0', '#F0F'], position: [0, 0.5, 1] }, onClick: function () { this.animateShape('ellipse1', { endlinewidth: 5, endcoord: {h: 300} }); } }); /* デモ２の図形 */ canvas2.createShape('line1', 'line', [ {x: 100, y: 50}, {x: 150, y: 50}, {x: 200, y: -20}, {x: 250, y: 100} ], { zindex: 100, coordmode: 'relative', style: { lineWidth: 5 }, hoverStyle: { strokeStyle: '#F00', fillStyle: '#F00', fadeSpeed: 500, easeType: 'linear' }, onClick: function (s, c, t) { this.animateShape('line1', { endlinewidth: 15, endcolor: { strokeStyle: '#999' }, endcoord: [ {x: 300, y: 50}, {x: 150, y: 50}, {x: 200, y: -20}, {x: 250, y: 100} ], afterFinish: function () { this.animateShape('line1', { endlinewidth: 25, endcolor: { strokeStyle: '#CCC' }, endcoord: [ {x: 300, y: 150}, {x: 150, y: 50}, {x: 200, y: -20}, {x: 250, y: 100} ], duration: 500, afterFinish: function () { this.animateShape('line1', { endlinewidth: 5, endcolor: { strokeStyle: '#000' }, endcoord: [ {x: 100, y: 50}, {x: 150, y: 50}, {x: 200, y: -20}, {x: 250, y: 100} ], duration: 300, easeType: 'easeInExpo' }); } }); } }); } }); canvas2.createShape('polygon1', 'polygon', [ {x: 400, y: 50}, {x: 600, y: 180}, {x: 440, y:240} ], { image: { x: -190, y: -80, url: '../image/photo/GT-R.jpg', frame: true, interlocked: true }, style: { lineWidth: 5, strokeStyle: '#666', fillStyle: '#00F' }, hoverStyle: { strokeStyle: '#F00', fillStyle: '#F00', fadeSpeed: 500, easeType: 'linear' }, onClick: function (s, c, t) { this.animateShape('polygon1', { endlinewidth: 15, endcolor: { strokeStyle: '#999' }, endcoord: [ {x: 620, y: 60}, {x: 420, y: 40}, {x: 520, y:300} ], easeType: 'easeOutQuad' }); } }); canvas2.createShape('circle1', 'circle', {x: 80, y: 160, r: 50}, { zindex: 15, style: { strokeStyle: '#CCC', fillStyle: '#FF0', lineWidth: 2 }, hoverStyle: { strokeStyle: '#555', fillStyle: '#FF0', fadeSpeed: 300, easeType: 'easeInQuad' }, activeStyle: { strokeStyle: '#00F', fillStyle: '#0FF' }, gradient: { strokeStyle: '#F00', startFrom: 'center', color: ['#F00', '#FF0', 'rgba(0,255,255,0.8)'], position: [0, 0.5, 1] }, onClick: function () { this.animateShape('circle1', { endlinewidth: 5, endcoord: {x: 140, y: 180, r: 120} }); } }); canvas2.createShape('ellipse-sector1', 'ellipse-sector', {x: 280, y: 200, start: 50, end: 320, w: 150, h: 100}, { zindex: 20, style: { strokeStyle: '#CCC', fillStyle: '#FF0', lineWidth: 2, shadowBlur: 5, shadowColor: '#333', shadowOffsetX: 2, shadowOffsetY: 2 }, hoverStyle: { strokeStyle: '#555', fillStyle: '#F00', fadeSpeed: 300, easeType: 'easeInQuad' }, activeStyle: { strokeStyle: '#00F', fillStyle: '#0FF' }, gradient: { strokeStyle: '#F00', startFrom: 'right-top', color: ['#FF0', '#F00', '#00F', 'rgba(0,255,255,0.8)'], position: [0, 0.5, 0.5, 1] }, onClick: function () { this.animateShape('ellipse-sector1', { endcoord: {x: 100, y: 180, w: 300, start: -50, end: 80} }); } }); });