canvas

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

RSS
  • 受付中

    回答
    1

    Canvasを使って動く塗り絵を作りたい

    前提・実現したいこと https://stainedglassvideo.com/ このサイトのように、動く塗り絵を作りたいのですがどのようにして実装しているのかを知りたいです。 動画をcanvasに変換して表示していると予想しているのですが、どのようにそれぞれのパーツに色を付けているのでしょうか。

    • -1評価
    • 49PV
    defghi1977 defghi1977 3日前に 回答
  • 解決済

    回答
    1

    Canvas要素のサイズをスライダーで変化させるイベントを作ったが、小さくはなっても大きくはならない

    前提・実現したいこと Canvasに描画した矩形をglobalCompositeOperationであらかじめ用意したハート形の画像の形に切り抜いています。スライダーを使って変更した数値を.drawImageに渡してサイズを変更させたいのですが、小さくすることはできても大きくすることができません。どなたかご教示お願い申し上げます。 該当のソースコード

    • 0評価
    • 104PV
    23appswork 23appswork 3日前に コメント
  • 解決済

    回答
    1

    CanvasでglobalCompositeOperationを使って切り抜いた描画の色を動的に変化...

    前提・実現したいこと Canvasに描画した矩形をglobalCompositeOperationであらかじめ用意したハート形の画像の形に切り抜いています。描画したハート形の色をテキストウインドウに入力した色(例「pink」)に変化させたいのですが、動作しません。どなたかご教示お願い申し上げます。 該当のソースコード <!DOCTYPE html>

    • 0評価
    • 20PV
    23appswork 23appswork 4日前に コメント
  • 解決済

    回答
    1

    canvasにて変換した画像の戻しができません

    canvasにて書き込んだものを画像に保存することはできました。 以前の質問にて、当方の「Chromeにて完全にローカルで完結したい」という希望に対して、回答者様より一るの方法として「--allow-file-access-from-filesフラグを付けて起動」と助言を受け解決に至りました。 今回躓いたのは、この「画像化したもの」をもう一度キャンパス上

    • 0評価
    • 82PV
    defghi1977 defghi1977 3週間前に ベストアンサー
  • 解決済

    回答
    1

    canvasで画像保存がうまくいきません

    canvasでローカル画像を呼び出し、加工(絵画)、これを画像として出力したいのですがうまくいきません。chromeエラーによると Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    • 0評価
    • 79PV
    defghi1977 defghi1977 3週間前に ベストアンサー
  • 解決済

    回答
    3

    なぜ、ヒダリに偏るのか

    発生している問題・エラーメッセージ 下記のソースは、描画した図形を無作為に動かすソースです。 this.vオブジェクトは、動く図形のはやさを指定しているのですが、random()*10だと図形の動く方向が右下にしか進みません。なぜなのでしょうか。 また、このrandom()*10に-5を加えrandom()*10-5とすると、ブレイクスルーjavascr

    • -1評価
    • 492PV
    aaaaaaaa aaaaaaaa 3週間前に ベストアンサー
  • 受付中

    回答
    1

    レンタルサーバーとクライアントPC 要求と送信 プログラムの処理

    知りたいこと 現在私は,レンタルサーバー上にhtml/css/javascript/php/txtファイル等をアップロードしています. ブラウザでURLの入力を行うことでindex.htmlの表示を行っています. ボタンの表示・処理や,txtファイルの内容をjavascriptで処理を行いcanvas要素で表示を行っています. 気になった点は,レンタル

    • 0評価
    • 74PV
    x_x x_x 3週間前に 回答
  • 解決済

    回答
    1

    ボタンのホバーでcanvasの描画、クリア

    左に日本地図、右に地域名を書いたボタンを配置しました。 1)日本地図の地域にカーソルホバーで、地域名のボタンが反応、 2)地域名のボタンにカーソルホバーで、日本地図の各地域の描画が変更される という物をjacascriptとcanvasで作成したいです。 1)日本地図の地域にカーソルホバーで、地域名のボタンが反応の部分は以下のコードで出来ました。 【

    • 0評価
    • 56PV
    turbgraphics200 turbgraphics200 3週間前に ベストアンサー
  • 解決済

    回答
    4

    「文脈で管理される座標集合」ってなに?

    javascript逆引きレシピ初版の362頁にて キャンバスに直線を描画したい パス(path)を利用します。パスとは、コンテキストで管理される座標集合のこと。 CanvasAPIでは、パスで管理された座標に従って、直線や曲線を描画、あるいは該当の領域を塗りつぶすことになります。 コンテキストは、こちらの通り解釈すると文脈とある

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

    回答
    1

    AndroidでBitmapに直接線を描画

    Androidの写真編集のアプリを開発しています。 端末内の画像を取得してその写真に線を描けるようなものを開発しようと考えているのですが、調べるとBitmapに直接描画する場合はCanvasを使用するというのを目にしました。 Bitmapに直接描画する場合はCanvasを使用するのが一番いいのでしょうか? もしくは、別の方法があれば教えて頂けると幸いです。

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

    回答
    2

    描画コンテキスト、2dコンテキスト、コンテキストオブジェクトとは何なのか

    canvasなどでよく見かけるコンテキストとはどういう意味のものなのでしょうか。 コンテキスト自体は、たくさんの意味を持つ単語ですが、今回は、canvasなどでやれ描画コンテキストやらコンテキストオブジェクト(getContext())、2dコンテキストと呼ばれるものの意味が何なのかを知りたいのです。 検索フォームで「canvas コンテキ」と打つと「「ca

    • 0評価
    • 87PV
    kako_mirai 退会済みユーザー 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    ベン図をHTMLで作成したい

    お世話になります。下記図をHTMLで作成したいです。 どのような組み方が最適でしょうか?HTML、CSSでの組み方をご教授頂ければ幸いです。 要件 ●図表のカラーパレットの色はCSSで色を変えられるようにしたい。 ●リキッドレイアウトorレスポンシブで組みたい。 SP、タブレット、PC表示でレイアウト崩れがなければ拘りはない。 ●図表の赤線は無くても構わ

    • -2評価
    • 113PV
    kako_mirai 退会済みユーザー 1ヶ月前に ベストアンサー
  • 受付中

    回答
    0

    Canvas Androidに画像として保存する方法

    Canvasを画像としてAndroidに保存する 現在、少し変わったカメラアプリを作成しているのですが、Canvasを画像としてAndroidに保存するやり方がわかりません。 詳しいやり方やソースコードを教えてもらえると助かります。 よろしくお願いします。 開発環境 monaca 言語 HTML5/Javascript/CSS

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

    回答
    2

    プロトタイプの有効性、必要性

    下記のソースは、canvasのパーティクルを動かすソースです。 プロトタイプ無し //①canvas要素の取得 var canvas = document.getElementById("canvas"); //②canvas要素から描画コンテキストの取得 var ctx = canvas.getContext("2d"); window.req

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

    回答
    1

    vueを使用したcanvasでの線の描画について

    前提・実現したいこと ここに質問したいことを詳細に書いてください Vueを用いてcanvasで線を描画しようとしていた際に疑問に思った点について質問したいと思っています。 Vue、canvas共に勉強をし始めたばかりなので、詳しい仕様についてわからないため教えていただきたいです。 ソースコード var ctx window.onload = functi

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

    回答
    3

    canvas要素について

    前提・実現したいこと 以下のサイトのようにjavascriptを実装したいと思っています。 このサイトは左上の「ABOUT US」をクリックすると、ページがめくれるようなアニメーションで、隠れていたコンテンツが表示されるようになっています。 参考サイト:https://on-the-trip.com/ 発生している問題 上記のアニメーションに<can

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

    回答
    1

    canvas 背景にしたい

    canvasのアニメーションを背景にしたいのですがエラーは出ていないのに表示されません。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset "UTF-8"> <title>Hello Canvas!</title> <style> #cvs{

    • 0評価
    • 96PV
    homel15k homel15k 2ヶ月前に コメント
  • 解決済

    回答
    1

    javascript canvas においてお絵かきアプリを作成しています。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas.html</title> </head> <body> <section> <h1>Canvas</h1> <nav> <!-- 線の色を変更するHTML要素 --> <input type="color" id="c

    • 0評価
    • 112PV
    ssssss ssssss 2ヶ月前に コメント
  • 解決済

    回答
    1

    Monacaでcanvasに画像を読みこんで表示し、Android実機に表示された画像を保存したい

    前提・実現したいこと 現在、Monacaを使ってスマホアプリを作ろうとしています。 canvasに画像を読みこんで表示し、previewをタップ後、 downloadをタップすると、表示された画像が スマホにダウンロードされるようにしたいと思っています。 MonacaのWebブラウザ上のプレビュー画面では、 画像のcanvasへの読みこみと表示された画像

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

    回答
    1

    Canvasに画像が表示されません

    実現したいこと Canvasに画像を表示させたいです。 試したこと js var img = new Image(); var Draw; var draw; Draw = function() { ctx.drawImage(img, 0, 0); }; img.src = "img/logo.PNG"; img.addEventListen

    • 0評価
    • 113PV
    narururu narururu 2ヶ月前に ベストアンサー
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    104

  • 総質問数

    209

  • 今週の質問数

    3

関連するタグ

canvasタグのよく見られている質問

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