jQuery ClickableCanvas デモページ8

jQuery ClickableCanvasの設定方法

クリップ機能のテスト　テストバージョン
FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

　Canvasのclipメソッドを使って隠れた2枚目の画像を表示しています。丸い窓をクリックすると窓が移動します。一方のクリップ画像は円の動きと画像の動きがリンクしていると思いますが、 imageのinterlockedにtrueを入れるとこのように連動します。 Chromeでは丸窓のギザギザがやや目立ちます。

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

サンプルのコード詳細 $(function() { var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'circle-image1', type: 'circle', attr: { shapeZIndex: 101 }, image: { url: '../image/background/autumn-leaves_beiz.jp_M07486.jpg', offset: [0, 0], interlocked: false }, coords: { x: 380, y: 100, r: 50 }, onClick: slide1 }); canvasArea.createShape({ name: 'circle-image2', type: 'circle', attr: { shapeZIndex: 102 }, image: { url: '../image/background/autumn-leaves_beiz.jp_M07486.jpg', offset: [-100, -100], interlocked: true }, coords: { x: 100, y: 200, r: 30 }, onClick: slide2 }); canvasArea.createShape({ name: 'background-image', type: 'rect', attr: { shapeZIndex: 100 }, image: { url: '../image/background/autumn-leaves_beiz.jp_M07092.jpg', offset: [0, -160] }, coords: { x: 20, y: 20, w: 600, h: 440 }, style: { lineWidth: 0.5, strokeStyle: '#000' } }); function slide1(shape, coord, topmostShape) { this.animateShape('circle-image1', { endcoord: { x: (Math.random() * 440) + 90, y: (Math.random() * 320) + 90, r: (Math.random() * 40) + 30 }, duration: 1000, transition: 'sinoidal' }); } function slide2(shape, coord, topmostShape) { this.animateShape('circle-image2', { endcoord: { x: (Math.random() * 440) + 90, y: (Math.random() * 320) + 90, r: (Math.random() * 40) + 30 }, duration: 1000, transition: 'sinoidal' }); } });