canvas

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

RSS

  • 解決済

    回答
    2

    JavaScriptによるボイド(Canvasでのアニメーション)への背景画像の適用

    Javascriptでボイド(群れのシミュレーション)が背景画像を塗りつぶすようにしたいのですが、背景画像をボイドを重ね合わせたり、ボイドに対してbackground-imageを設定することが出来ませんことが出来ません。 <!DOCTYPE html> <meta charset="utf-8"> <title>BakuBag(MemoryEater)

    • 0評価
    • 285PV
    s8_chu s8_chu 2日前に コメント
  • 解決済

    回答
    1

    canvas上に複数の画像を複数個ランダムな場所に配置する方法

    canvas上に複数の画像を複数個ランダムな場所に配置する方法を教えてください。 canvasのサイズは横1300px 縦700pxです。 背景画像も同上です。 背景画像の上に 横200px 縦100px程度の大きさの別の画像を 複数の画像種類、複数個、ランダムな場所に配置したいのですが、 表示されているすべての画像がわかるようにコンソールにだしているのです

    • 0評価
    • 29PV
    4443g 4443g 2日前に コメント
  • 受付中

    回答
    0

    【Fabric.js(1.4.13)】JSONから描画したCanvasを、修正してJSONに吐き出す...

    Fabric.jsを使用して、背景に敷いたJPG画像の一部を四角形で囲み、ImageMapでいくつかのリンクを付ける処理を書いています。 ショッピングサイトの管理者機能です。 (公開画面はめくり型の電子カタログの写真ひとつひとつにImageMapリンクを付けて、写真をクリックするとカート画面にジャンプする、という感じです) 作成したひとつの四角形(Rec

    • 0評価
    • 25PV
    teratailが6日前に アップデート
  • 受付中

    回答
    0

    fabricjs 1.7.17でtextboxをiOSから操作をするとバグがあるので直したい。

    前提・実現したいこと webでcanvasをつかって画像を編集するサイトを作成しようと思っています。 発生している問題・エラーメッセージ そこで、fabricjs(1.7.17)を使い機能はほとんど実装したのですが、 textboxをiOSから操作をした場合に、削除した文字が復活してしまいます。 再現方法 ・適当に文字を入力する。確定はしない ・入力

    • 0評価
    • 23PV
    teratailが1週間前に アップデート
  • 解決済

    回答
    1

    キャンバスの描画削除

    前提・実現したいこと キャンバスを背景にサイトを作っているのですが。 リサイズをするたびに背景画像の■が増えて行ってしまいます。 どこにグラフィッククリアを入れればいいのかわからない状態です。 またCSSのほうで myCanvas { position:fixed; top:0; left:0; width:100%; height

    • 0評価
    • 259PV
    NatsumiOki NatsumiOki 2週間前に ベストアンサー
  • 受付中

    回答
    3

    OnClick時に紙吹雪のようなアニメーションを画面上から出したいです!

    こんにちは。 プログラミング初心者です。 現在Monaca(HTML+Javascript)にて初めてのアプリ開発に取り組んでいます。 タイトルのように、画像をOnClickで紙吹雪のようなアニメーションが発動する仕組みを作りたいと思っています。手始めにHTMLのCanvasタグを使って色々と試してみましたが、うまくいきませんでした。そこで、上記のような

    • -2評価
    • 514PV
    anopurihana anopurihana 2週間前に コメント
  • 解決済

    回答
    1

    PythonのCanvasに画像が表示されない

    実現したいこと 画像をウィンドウのcanvasに表示させたいです。 macOSを使っています。 発生している問題・エラーメッセージ PIL import でエラーを回避できたのですが、ウィンドウに指定した画像が表示されません。 映したい写真のフォーマットはpngです。 画像を差し替えたところ、表示される画像と表示されない画像がありました。 その二つの画像

    • 0評価
    • 58PV
    lucasiel lucasiel 3週間前に コメント
  • 解決済

    回答
    1

    [Canvas] 図形の中に文字をいれる

    Canvasで4つの四角形をつくりましたが、これに、それぞれ四角形いっぱいに、文字を入れたいのですが、いれることは可能でしょうか? <svg xmlns="http://www.w3.org/2000/svg" width="250" height="50"> <rect x="0" y="0" width="48" height="48" rx="5

    • 0評価
    • 39PV
    xjaPANDA xjaPANDA 1ヶ月前に ベストアンサー
  • 受付中

    回答
    2

    Chart.js、ドーナツグラフのデータのカウントアップ(ダウン)アニメーション表示

    実現したいこと ドーナツグラフ 円グラフに対する線形グラデーション ドーナツグラフの真ん中に数値を表示する 真ん中の数値をカウントアップ(ダウン)アニメーションをつける Chart.jsを使っています。 あるデータを取ってきて、その割合をアニメーションでドーナツグラフの真ん中に表示させたいです。現段階ではランダムな値でデータ更新をしていま

    • 0評価
    • 80PV
    namimon namimon 1ヶ月前に 回答
  • 解決済

    回答
    1

    サンプルプログラムで、シェーダの初期化に失敗し、正常に動作しない。

    WebGLを勉強するため、古い本になりますが、以下の本を用いてWebGLの勉強をしております。 『WebGL+HTML5 3DCGプログラミング入門』2012年出版 この本は紙面を節約するため、追記しているにも関わらず、記述していない箇所が多いため、常にサンプルプログラムと見比べて作業を進めております。しかし、書籍に付属してあるサンプルプログラムの5章で

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

    回答
    1

    フロントカメラが映している内容をTextureViewに反映した際に、描画比率が正しくない

    Androidで動くカメラアプリをAndroid Studioを用い、Javaで開発しています。 現在、下記サイトを参考に、カメラ撮影アプリを作成しています。 ANDROID CAMERA2 API EXAMPLE TUTORIAL https://inducesmile.com/android/android-camera2-api-exampl

    • 0評価
    • 89PV
    y_oota y_oota 1ヶ月前に 回答
  • 解決済

    回答
    2

    Python tkinterでSpinboxで入力した値を得て計算し、表示させるにはどうしたら良いで...

    前提・実現したいこと PyhonでTkinterを用いてGUIアプリケーションを作成しています。 文房具の請求のプログラムなのですが、イメージはamazonなどの 通販サイトみたいな感じです。 いま、tkinterのSpinboxという機能を使って、商品の個数を選べるようにし、 その上下(▲▼)ボタン(またはキー入力)を押して個数を決めたときに

    • 0評価
    • 142PV
    flower flower 1ヶ月前に コメント
  • 受付中

    回答
    1

    canvasへの画像の描画について

    現在、ユーザーがアップロードした画像をcanvasに描画する事を目指して作成しています。 描画自体は出来たのですが、スマホからカメラで撮影した場合や、スマホで撮影した画像をアップロードすると 意図した向きで描画されません。 動作としては inputタグにより内容が変化したら発動。 データをあらかじめ用意してある <canvas id="c1" wid

    • 0評価
    • 91PV
    kei344 kei344 1ヶ月前に 回答
  • 受付中

    回答
    3

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

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

    • -3評価
    • 213PV
    pashango2 pashango2 1ヶ月前に 回答を編集
  • 解決済

    回答
    2

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

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

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

    回答
    1

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

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

    • 0評価
    • 261PV
    yukabyo yukabyo 2ヶ月前に 回答
  • 受付中

    回答
    0

    JavaScriptライブラリflotr2の読み方

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

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

    回答
    1

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

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

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

    回答
    2

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

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

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

    回答
    1

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

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

    • 0評価
    • 198PV
    mew.labda mew.labda 3ヶ月前に コメント
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    90

  • 総質問数

    174

  • 今週の質問数

    2

関連するタグ

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