html CanvasをiframeでWordPressに表示する/Canvasの右クリックを禁止する

html-canvas

html CanvasをWordPressに貼り付ける際のいろいろメモ。

めもめも

iframeで表示

  • html CanvasをWordPressに表示する際にはiframeを使う

WordPressのカスタムhtmlに下記を記入(コード欄は右にスクロールします)

//iframeを画面中央表示
<div class="iframe-wrapper" style="text-align: center;">
<iframe id="html5" title="タイトル" src="canvasのURL" width="サイズ" height="サイズ" frameborder="0" scrolling="no">
<br /></iframe></div>

表示サイズを変えてみるテスト

Animateのパブリッシュ設定でレスポンシブ、表示領域いっぱいに拡大縮小 にチェックが入っている場合はiframeのサイズに合わせて表示されます。

動く絵日記 1日目」のCanvasを表示するiframeサイズを変えてみるテスト

width=”340″ height=”200″

width=”680″ height=”400″

iframe のサイズに合わせてCanvasも枠いっぱいに表示されました

canvasでの右クリックを非表示にする

右クリック禁止の設定

Adobe Animateを使って書き出す場合

AnimateでCanvasを書き出すなら0フレーム目に以下を追加

document.querySelector("canvas").addEventListener("contextmenu", () => {
	event.preventDefault();
});

htmlページのbody要素に追加する場合

canvasを表示するhtmlページのbodyタグに以下を追加

<body onContextmenu="return false;">

関連記事 JavaScript


にほんブログ村 にほんブログ村へ