7
票
Accepted
JavaScript によりフリーハンドで描画させたい
お絵かきツール的なものだと判断しました。
「かければいいだけ」であることを考えて最小限のコードを書くと次のようになります。
var canvas = document.querySelector("canvas");
canvas.addEventListener("mousemove", function(e){
e.buttons === 1 && ...
2
票
描画ツールをcanvasで実装するにあたり、図形の大きさを変更する方法について質問があります。
参考にするページがおありになるのですから、そちらのソースをご確認されてはいかがでしょうか?
https://dl.dropboxusercontent.com/u/429437/html5/seminar/05-draw-tool1.html
例えば、マウスを動きでリアルタイムに再描画するには、下記の手法を使っているのだなぁ、ということがわかります。
// ...
2
票
getimageDataを使ってもローカル環境だと画像が上手く読み込めません
基本的には、ウェブサーバで実行する以外に対処不可能です。
Google Chrome と Opera では、ローカルに保存されたページ同士での情報漏洩対策ですべてのローカルファイルが別オリジンだとみなされます。–allow-file-access-from-files という起動オプションを付ければ他のブラウザと同じ挙動になりますが、...
2
票
canvas内に複数の画像をランダムに散らす
drawImage で img から画像を描画しているので、やり方はあっていると思います。
img を配列にできているのであれば、以下の様にすれば、いろいろな画像を使って描画できます。
ctx.drawImage(img[idx % img.length], 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh);
ランダムに画像を使いたい場合は、img ...
2
票
Accepted
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。
Method to convert HTML5 canvas to SVG?
Fabric.jsというのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。
Fabric.js is a powerful ...
2
票
Accepted
canvasで書いた線を曲線にしたい
lineJoinを'round'にすれば線と線の継ぎ目が目立たなくなります。またbezierCurveToなどの曲線用メソッドも使った方がよいです。
var ctx = canvas.getContext('2d');
ctx.lineWidth = 30;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(points[0], [1]);
...
1
票
HTML4.01でcanvasタグを使用する事は可能でしょうか。
質問文の中でも触れられているとおり、HTML 4.01 は canvas タグをサポートしていません。ブラウザによっては独自に解釈して表示することもあるでしょうが、仕様外です。
HTML5 が最初に勧告されたのは 2014 年です。現代的には HTML 4.01 を避けられるのであれば避けた方がベターです。HTML 4.01 に拘るのであれば、canvas タグを使わずに描画することになります。...
1
票
1
票
Accepted
次のホームページのアニメーションの技術を分析したい
結論
まずは結論から。greensock社が作成したアニメーションライブラリtweenmaxを利用しているようです。
調べ方
ざっくり調べ方ですが、Google Chromeのデベロッパーツールを開きNetworkタブをまず確認します。ブラウザ上でインタラクティブに動くものはほとんどの場合はJavaScriptで書かれているので、JavaScriptのファイルを確認しに行きます。
このとき、...
1
票
leafletでマーカーをcanvasで描画している時、マーカーサイズを動的に変更するとイベントの判定がズレてしまう
自己解決しました。
結局マーカーサイズ変更処理の箇所でinput要素の値をnumberにキャストして渡してあげたら正常に動作しました。
内部でどういう処理が行われているか分かりませんが、やはり型には注意したほうがいいですね
1
票
Accepted
rangeの値に合わせてarcで図形を生成したい
上のrangeの数値に合わせて、下のrangeareaの図形の半径を取得したいです。
lineWidth の求め方はご存じですので、
さらにrangearea の半径を取得したいという真意がわかりませんでした。
おやりになりたいのは、このようなことでしょうか?
$("#range").on("change", function() {
var lineWidth = $(...
1
票
Accepted
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
票
Accepted
「img.onload」後に、生成したimgオブジェクトを「img.style.display = 'none';」している理由は?
質問者さんもおっしゃってる通り私も理由思い付かず、意味はないと思います。
1
票
Accepted
全てのパーティクルに対して同じ処理を実装させたい[canvas]
訂正箇所としては、function hover(e) の中で記載されているループで、以下を満たせばよいと思いますので
for (j = 0; j < num; j++) {
// どの円でもホバーされていたら動作を止める
}
一番最小の修正で済ますなら、次のようにすると良いでしょう。
function hover(e) {
var mx = e.clientX, my = e....
Only top scored, non community-wiki answers of a minimum length are eligible