canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

RSS

  • 受付中

    回答
    3

    座標計算。数学得意者求む

    2点間 x1 y1 , x2 y2 を通る直線a上の2点間の中間点cがあり、 直線aに垂直で交わる中間点cを通る直線b。 交点cからd距離離れた直線b上の点eの座標の求めかたがわかりません。 完全にお手上げなのですが、どなたか救いの手を差し伸べてくださいませんか?

    • -2評価
    • 165PV
    pashango2 pashango2 5日前に 回答を編集
  • 解決済

    回答
    2

    HTML canvasアニメーションを動画ファイル化する為には?

    HTMLのcanvas上で数分程度のモーショングラフィックスアニメーションを動的に生成し、そのアニメーションを動画ファイルとして書き出したいです。 そのアニメーションにはバックグランドのBGMの他にも、ところどころに動的に効果音も入ってきます。例えば3分のアニメーションであれば、イントロクリップ用の音声ファイルが再生され、イントロと本編のトランジション部

    • 0評価
    • 75PV
    tkanda tkanda 5日前に ベストアンサー
  • 解決済

    回答
    1

    chart.jsでドーナツ型グラフの中央にタイトルを載せたい

    現在chart.jsにてドーナツ型グラフを作成しています。 実装したものはこちらです chart.jsのドキュメント 現在、以下のようなコードを書いて、 ドーナツグラフを表示しております。 今回やりたいことは、 ドーナツグラフの真ん中の穴の中央にタイトルを入れたいです。 例えば「制作実績円グラフ」のようなテキストを入れることは可能なので

    • 0評価
    • 39PV
    yukabyo yukabyo 1週間前に 回答
  • 受付中

    回答
    0

    JavaScriptライブラリflotr2の読み方

    flotr2の読み方について JavaScriptライブラリ’flotr2’の読み方が分からなく大変困っております。どなたか分かる方がいらっしゃいましたら教えていただけるとありがたいです。

    • 0評価
    • 72PV
    teratailが1ヶ月前に アップデート
  • 解決済

    回答
    1

    canvasに複数の画像を重ねる方法

    前提・実現したいこと メインのcanvasに描画した横長の画像をdivタグでラッピングしてスクロール可能としています。 メインの画像の左右をそれぞれコピーして別のcanvasに描画します。 divタグで定義したラッパーの左右に上記のcanvas2つを配置し スクロールしても左右の枠は常に表示されるようにしたいです。 <メインの横長画像>

    • 0評価
    • 128PV
    masahiro.o masahiro.o 1ヶ月前に ベストアンサー
  • 解決済

    回答
    2

    canvasの重ね描画方法について

    前提・実現したいこと メインのcanvasにchart.jsでグラフを描画しています。 このライブラリに自体にはスクロール機能がないので、divタグでラッパーを作成しcssで「overflow-x: scroll」を 指定する事で横スクロールは可能となります。 このままだとスクロール中は軸の目盛りが見えなくなってしまうので 軸を描画するcanvas

    • 0評価
    • 104PV
    masahiro.o masahiro.o 1ヶ月前に 回答
  • 解決済

    回答
    1

    Canvasに、フォームに入力した内容に沿って図形を描画したい。

    前提・実現したいこと javascriptとHTML5を使い、フォームからの(左上x座標,同y座標,右上x座標,同y座標,右下x座標,同y座標,左下x座標,同y座標)といった形の記述を読み取り、Canvas上でその座標指定によってパスで図形を表示する動作を実現したく実験しています。 一度Submitを押して表示した後でも、もう一度別の座標を入力しSubm

    • 0評価
    • 96PV
    mew.labda mew.labda 1ヶ月前に コメント
  • 受付中

    回答
    1

    【canvas】レーダーチャートのテキストにシャドウのようなものがかかってしまう(chromeのみ)

    ↑こちらのようにchromeでのみテキストにシャドウがついたような状態になってしまいます。 レーダーチャート自体は提示出来ません。 IE・Edge・firefoxで検証した結果、こちらでは問題ありませんでした。 cssでシャドウの指定等が影響していないか調べましたが、こちらの影響はありませんでした。 スマートフォン版では上記の現象は見られ

    • 0評価
    • 105PV
    arue arue 1ヶ月前に コメント
  • 解決済

    回答
    1

    物理演算ライブラリmatter.jsのテクスチャの大きさ指定について

    現在、mattarjsを使って物理演算のテストをしています。 書いたコードは以下 const circle_stack = Composites.stack(10, 10, 8, 5, 0, 0, function(x, y) { return Bodies.circle(x, y, Math.floor(Common.random(15,

    • 0評価
    • 200PV
    matilda007 matilda007 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    HTML5 CanvasのrequestAnimationFrame()動作中にマウス操作で点を表示...

    Videoタグで表示している動画を、Canvas上でパラパラ漫画風に表示させています。 ここで使用しているrequestAnimationFrame()実行中のCanvas上に、マウスクリック操作で赤い点などを打って、赤い点も含めてCanvas画像を保存したいのですが、どうやらせっかく打った赤い点は、requestAnimationFrame()の連続

    • 0評価
    • 221PV
    SaintKnowledge SaintKnowledge 1ヶ月前に ベストアンサー
  • 解決済

    回答
    3

    Canvasで複数の箇所に同一アニメーションを設置する方法

    前提・実現したいこと Canvasを使った波のアニメーションを実装したいと考えています。 実装することはできたのですが、これを同じページに複数設置する場合、 どう修正したら良いのかご教示いただきたいです。 (類似の質問は見つけたのですが、私には難しく…) 具体的には下記の項目を実現したいと思っています。 同一アニメショーンのCanvas

    • 0評価
    • 175PV
    kkrg24 kkrg24 1ヶ月前に コメント
  • 解決済

    回答
    1

    canvasで円を描きたい

    前提 とある製品のプロダクトサイトを作成しています。 その中で、製品の紹介ページで、商品の販売開始年と販売終了年のグラフ(?)を正円で表現する箇所があり、そこをcanvasで表現したいと思っています。 実現したいこと 動きとしては、 1.ページロード時に、販売開始年と販売終了年を取得。 →これは既に対応できています。 2.ロード後に取得

    • -1評価
    • 174PV
    www-www www-www 2ヶ月前に 回答
  • 解決済

    回答
    1

    fabric.jsにて日本語または全角文字で間延びする

    fabric.jsにてcanvasに文字を描画しているのですが 半角英数字の場合は問題ないのですが、日本語や全角文字になると コントロール枠が間延びします。。。 色々調べてみたのですが、この現象に対する事例とうはなく 何か原因になりそうなヒントでも頂ければ助かります。 var canvas = new fabric.Canvas('myCa

    • 0評価
    • 98PV
    KSwordOfHaste KSwordOfHaste 2ヶ月前に 回答を編集
  • 解決済

    回答
    1

    マウス追従と同時に画像を動くようにしたい

    前提・実現したいこと ap.pngは飛行機の画像です。 実現したい機能は 1)飛行機がマウスを追従 →実現済み 2)飛行機の頭がマウスの方向を向く →例えばマウスを右回りにしたら飛行機も右回り、マウスを左回りにしたら飛行機も左回りになるようにしたい。 canvasにこだわりませんので、上記2)が簡単に実現できるアドバイスいただければ幸いです

    • 0評価
    • 229PV
    nakazawa nakazawa 2ヶ月前に ベストアンサー
  • 解決済

    回答
    2

    CANVASで画像を表示するときに、静止画なのにsetIntervalを使う意味が分かりません

    CANVAS初心者です。CANVASで画像を表示するときに、静止画なのにsetIntervalを使う意味が分からず、普通のimage要素のようにただ置くことはできないのでしょうか、少し調べたところ、大きさの調整やマスキング、背景として使うとき、とあったのですが、それだけのためにsetIntervalを使うのでしょうか?アドバイス頂けたら幸いです。 <!

    • 0評価
    • 158PV
    oyatsu8 oyatsu8 2ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    Python3 Tk ウィジェットの配置について

    Python3 の Tk を使ってあるウィンドウを作りたいと思います。 ○目標 ・ウィンドウは左,右上,右下(順に win1, win2, win3 と呼ぶ)の3つの構成 ・win1 は、番号の書いたリストボックスで上下に関してウィンドウのリサイズに対応 ・win2 は、Canvasで縦の長さは固定、横幅はウィンドウのリサイズに対応 ・win3

    • 0評価
    • 192PV
    IOError IOError 2ヶ月前に ベストアンサー
  • 受付中

    回答
    0

    soundjsでIE11だけが音声読みこみできません。

    adobe animateでhtml5 Canvasアニメを作っています。 音声を、soundjsを使って読み込み再生をしているのですが、何故かIE11ではうまく読み込めません。 (soundjs-0.6.2.min.jsを使っています。) var num = 0; var file_array = new Array("sound/s1mp3"

    • 0評価
    • 149PV
    teratailが3ヶ月前に アップデート
  • 解決済

    回答
    1

    Canvasでグラフを表現したい!(空気線図)

    前提・実現したいこと 上記のような空気線図を表現したいです。 jQueryのプラグインを調べまくっていますが、実現方法が全く分かりません。 Canvasを使ったグラフになると思うのですが、空気線図ぽいのがありません。 何か良いプラグイン、または実現方法をご提示いただけないでしょうか・・・? 何卒、宜しくお願い致します。 発

    • 0評価
    • 275PV
    SatukiMine SatukiMine 3ヶ月前に コメント
  • 解決済

    回答
    1

    canvasで保存する場合に劣化しない方法ってありますか?

    実現したいこと cordovaで画像を編集できるアプリを作ろうと思っています。 ただ、canvasのサイズをツールパレットとヘッダーを除いた部分に比率は変えずに縮小した状態で表示しています。 この状態でcanvasを保存すると、小さくなった状態のものが保存されてしまうので画像が劣化してしまい、繰り返し編集するとかなり酷いものになってしまいます。

    • 0評価
    • 169PV
    shota_e shota_e 4ヶ月前に コメント
  • 解決済

    回答
    1

    【Riot.js】canvasタグのwidthとheightがデフォルトのままで変わらない

    直接書き込めばちゃんとそれ通りのwidthとheightになるんですが、riotの下記の書き方だとデフォルトのwidth300pxとheight150pxが反映されてしまいます。 <canvas width="{ canvasWidth }" height="{ canvasHeight }" ref="canvas"></canvas> var s

    • 0評価
    • 131PV
    NobumitsuHata NobumitsuHata 4ヶ月前に 回答
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    85

  • 総質問数

    162

  • 今週の質問数

    1

関連するタグ

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る