2
票
canvas内に複数の画像をランダムに散らす
drawImage で img から画像を描画しているので、やり方はあっていると思います。
img を配列にできているのであれば、以下の様にすれば、いろいろな画像を使って描画できます。
ctx.drawImage(img[idx % img.length], 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh);
ランダムに画像を使いたい場合は、img ...
2
票
承認済み
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。
Method to convert HTML5 canvas to SVG?
Fabric.jsというのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。
Fabric.js is a powerful ...
1
票
leafletでマーカーをcanvasで描画している時、マーカーサイズを動的に変更するとイベントの判定がズレてしまう
自己解決しました。
結局マーカーサイズ変更処理の箇所でinput要素の値をnumberにキャストして渡してあげたら正常に動作しました。
内部でどういう処理が行われているか分かりませんが、やはり型には注意したほうがいいですね
1
票
Canvasに描かれたボタン要素をデベロッパーツールで取得したい
できません(少なくとも標準的な方法では)。
Canvas上のある部分が、人の目から見て他と区別可能な要素として描画されていても、それはHTML(DOM)の要素ではありません。よって、HTML(DOM)の要素を観察するツールで扱うことはできません。
<canvas> 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません
—— MDN 『<canvas&...
1
票
HTML4.01でcanvasタグを使用する事は可能でしょうか。
質問文の中でも触れられているとおり、HTML 4.01 は canvas タグをサポートしていません。ブラウザによっては独自に解釈して表示することもあるでしょうが、仕様外です。
HTML5 が最初に勧告されたのは 2014 年です。現代的には HTML 4.01 を避けられるのであれば避けた方がベターです。HTML 4.01 に拘るのであれば、canvas タグを使わずに描画することになります。...
1
票
1
票
承認済み
次のホームページのアニメーションの技術を分析したい
結論
まずは結論から。greensock社が作成したアニメーションライブラリtweenmaxを利用しているようです。
調べ方
ざっくり調べ方ですが、Google Chromeのデベロッパーツールを開きNetworkタブをまず確認します。ブラウザ上でインタラクティブに動くものはほとんどの場合はJavaScriptで書かれているので、JavaScriptのファイルを確認しに行きます。
このとき、...
1
票
承認済み
pixi.jsでリングが描きたい
円をbeginFillせずに、lineStyleを設定した状態でdrawCircleすることで枠線のみ描画できるはずです。
下記はgithubから取得したExamplesを展開し、examples-gh-pages\examples\js\basics\graphics.jsを書き換えたサンプルコードです。
var app = new PIXI.Application(800, 600, { ...
1
票
canvas要素を重ねて、重なった部分を透過処理
ひとつのcanvasに画像をずらして配置してglobalCompositeOperationはxorで実現はできるかと思います。
画像でではないですが参考になれば幸いです。
var canvas = document.getElementById('c')
var ctx = canvas.getContext('2d')
ctx.globalCompositeOperation ...
1
票
承認済み
「img.onload」後に、生成したimgオブジェクトを「img.style.display = 'none';」している理由は?
質問者さんもおっしゃってる通り私も理由思い付かず、意味はないと思います。
無効化に投票