[html5-canvas] タグが付いた質問
26
質問
0
票
0
回答
291
閲覧数
PDF.jsで暗号化PDFを描画したい
前提
Webアプリケーションを構築しています。
JavaScriptを使用し、ブラウザでPDFを表示する機能が必要になったため
JavaScriptでPDFを表示可能なPDF.jsを使用し、技術調査を行っています。
PDF.jsでは以下の2通りの描画形式があることを認識しております。
PDF.jsに搭載されているビューワ(viewer.html)を利用しiframeにて描画
pdfjs ...
0
票
0
回答
220
閲覧数
Chart.js で描画した棒グラフの両端が切れてしまう
前提
Chart.js(バージョン2.8.0)で複合グラフを作っています。
横軸:日付("2022-07-01"など)
縦軸:整数と実数
※横軸の表示をすっきりさせるため、xAxes.type='time'にしています。
※xAxes.typeを設定しないとこの問題が生じないことは確認済みです。
目標
このページのグラフのように、すべての棒グラフを完全に描画したい
https:/...
0
票
0
回答
100
閲覧数
canvasで作成した図形&テキストをhtml・cssで出力可能?
canvasで作成した図形やテキストを、html・cssで出力(書き出し)する事って可能でしょうか?
参考になるサイトを共有して頂く形でも構いません。方法ありますでしょうか?
0
票
1
回答
143
閲覧数
HTML4.01でcanvasタグを使用する事は可能でしょうか。
HTML4.01でcanvasタグを使用する事は可能でしょうか。
以下の記述でChart.jsを使用してグラフを描画する事が出来たのですが、canvasタグはHTML5から使用可能と思っております。
ご存じの方がいらっしゃれば、ご教授いただけますでしょうか。
よろしくお願いいたします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
0
票
1
回答
770
閲覧数
ChartJSのTooltip callback関数が動作しません。
ChartJSを使って棒グラフの表示を行っております。
ツールチップの内容を編集するため、tooltipsプロパティにcallbacksを定義しましたが、
ツールチップの中身が変わりません。原因はお判りでしょうか。
▼実行環境
OS:Windows10
ブラウザ:Chrome 90.0.4430.93
ChartJS:ver2.8
var ctx = document....
0
票
1
回答
97
閲覧数
次のホームページのアニメーションの技術を分析したい
Javaを中心にWebアプリ開発を主にしています。
今ホームページ制作にも興味を持ち、色んなサイトを見ているのですが、
以下のサイトのアニメーションに興味があります。
このサイトのHoldすると結晶になるようなアニメーションはどんな技術を使っていますでしょうか?
あるいは調べ方を教えていただけますと幸いです。
https://tsuyoshi.in/
URLがHTMLではないので、...
0
票
0
回答
170
閲覧数
フリーハンド描画実装に関する canvas と svg の違いは?
フリーハンド描画実装に関して、 canvas と svg の違いはありますか?
それぞれ長所と短所があれば知りたいです。
質問経緯
Webブラウザで動作するフリーハンド描画ツールを作成しようと思い、色々調べています。
当初はcanvasでしか作成できないと思っていたのですが、 svg で作成している人もいることに気が付きました。
両者を比較した上で何れかを選択したいのですが、...
0
票
1
回答
1,045
閲覧数
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
canvasへ描画した内容をSVGのパスデータへ変換して、SVGのパターンを適用させてみたいのですが、そもそも、canvasへ描画した内容をSVGのパスデータへ変換することは出来ますか?
検索してみたら下記ページが見つかったのですが、ここで記載されている内容は、canvasへ描画した内容をSVGへ取り込んでいるだけでSVGのパスデータへ変換しているわけではないのですか?
...
0
票
1
回答
432
閲覧数
leafletでマーカーをcanvasで描画している時、マーカーサイズを動的に変更するとイベントの判定がズレてしまう
お世話になります。
leafletで表示させているマーカーでクリックするとポップアップが表示されます。
このマーカーはcanvasで描画していて、
サイズを動的に変更出来るようにしています。
サイズを動的に変更するとクリックイベントの範囲が実際の円よりも広い判定になってしまい、
困っております。
マーカーをDOMで描画している場合サイズを変更しても問題ありません。
...
0
票
1
回答
705
閲覧数
canvas内に複数の画像をランダムに散らす
下記のサイトを参考に、落ち葉を降らせるアニメーションを製作中です。
Canvasで桜を降らせてみました | 株式会社オーツー|スタッフブログ
このサイトの例に習って、1種類の落ち葉を動かすことはできたのですが、
更に、いくつかの別々の葉っぱの画像をランダムに表示させたいと思っています。
例)leaf1.svg,leaf2.svg,leaf3.svg
(サイトの例では、1つの画像を仕様)
...
1
票
1
回答
1,048
閲覧数
pixi.jsでリングが描きたい
pixiを使ってリングの形が描きたいです。
円を描いて、その中を透明な円でくり抜きたいです。
canvasではarcとstrokeを使えばいけますが、pixiではエラーが出てしまいます。
ring = new PIXI.Graphics();
ring.beginPath();
ring.arc(x, y, rad, 0, Math.PI*2, false);
ring.stroke();
...
2
票
1
回答
2,360
閲覧数
canvas要素を重ねて、重なった部分を透過処理
お世話になります。
<div>
<canvas id="c1">
<canvas id="c2">
</div>
上記の様にcanvas要素を重ねて、c1に背景画像を描写し
c1の上にc2を設置して、この2つが重なった部分を透過した(親DIVの背景色が見える)ような状態を作成することは可能でしょうか。
...
0
票
2
回答
5,861
閲覧数
Canvasで作った画像をカメラロールに保存する
スマホ向けアプリをhtml5で作っています。
アプリの中でCanvasを使って画像を作成していまして、その画像をiOSのカメラロールに保存する方法が分かりません。
(描写は出来ています)
お絵描きアプリと画像の保存処理の実装
こちらを参考に保存は出来ましたが、保存ディレクトリが希望の物になりません。
(このディレクトリだとサンドボックス内に保存されるので、見ることが出来ません)
...
5
票
1
回答
183
閲覧数
「img.onload」後に、生成したimgオブジェクトを「img.style.display = 'none';」している理由は?
リンク先の「カラーピッカー」で、「img.onload」後に、「img.style.display = 'none';」しているのですが、どういう意味があるでしょうか?
・コメントアウトしても挙動は同じでした
「display = 'none';」でも、画像は非表示にならないのは…
・canvasに描画したから、imgは不要ということでしょうか?
・imgオブジェクトは、生成しただけなので(...
0
票
1
回答
2,420
閲覧数
HTML5 canvasで、テキストではなく、リンクテキストを描画したい
現状
・テキストなので、リンクを読み込むと、そのまま表示されてしまいます
var ctx = document.getElementById('canvasのID名');
ctx.fillText(text, x, y);
出力結果
<a href="/">スタック・オーバーフロー</a>
質問
・aタグを(リンク機能を保持したまま)...
0
票
1
回答
628
閲覧数
描画ツールをcanvasで実装するにあたり、図形の大きさを変更する方法について質問があります。
こういう描画ツールをwebブラウザ上で作成したいです。
https://dl.dropboxusercontent.com/u/429437/html5/seminar/05-draw-tool1.html
canvasタグを使ったやり方であることは理解しており、
予め、座標軸がわかっている(ユーザーが座標軸を設定しない)場合の描画の仕方までは理解しました。
http://...
0
票
0
回答
138
閲覧数
canvas描画時のmouseupイベントの遅延の原因
※ 描画は矩形であることが前提の質問になります。
下記のようなコードでcanvasに矩形を描画しています。
mouseupイベントのみが遅延して発生するのですが原因がわかりません。
遅延の時間はその時々です。
mousemove内の処理は描画以外何も行っていません。
mousemoveの処理を外しても遅延発生は変わりませんでした。
canvasでのみ発生しています。(...
2
票
1
回答
5,597
閲覧数
getimageDataを使ってもローカル環境だと画像が上手く読み込めません
今回、ページを開いた際にグレースケールの画像をcanvasに書き出し、そこにマウスを乗せると徐々にカラーがつく、という仕様のギャラリーページ(もどき)をつくってみました。
すると、下記の部分にエラーが出ました。
調べてみたところ、ローカル環境ではChromeとOperaにおいて同様のエラーが出るとのこと。
解決策はサーバー環境をMAMPなどで立ち上げることだそうで、...
0
票
1
回答
122
閲覧数
全てのパーティクルに対して同じ処理を実装させたい[canvas]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Circle</title>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
...
1
票
1
回答
4,414
閲覧数
html2canvasでキャプチャした画像が空になる
html2Canvasの DOMを画像に書き出す方法 を参考にさせていただき、コードを書いたのですが、
スクリーンショットを撮るボタンを押しても、空の画像ファイルが生成されるだけです。
クリアボタンも効きません...。
私が、ターゲットとなるdivの中で、img srcにphp変数を使用しているからなのでしょうか?
しかしローカルファイルに置換してもダメでした。
<div id="...
0
票
1
回答
1,907
閲覧数
JavaScript によりフリーハンドで描画させたい
JavasSriptで手書き入力を実現させたいのですが、中々いいサンプルがありません。
色の選択、線の太さ等設定は必要ありません。
単純にかければいいだけです。
サンプルページ等あれば教えて下さい。
宜しくお願いします。
1
票
1
回答
911
閲覧数
Canvasの画像にフィルターを掛けたい
こちらのサイトを参考にfilterで画像を編集できるボタンを作っています。
var can = $("#drawarea")[0];
var context = can.getContext("2d");
$("#select").on("change",function(){
var fileList = this.files ;
if( 1 > ...
1
票
1
回答
108
閲覧数
rangeの値に合わせてarcで図形を生成したい
<input type="range" name="range" id="range" data-input="input" value="0" max="70">
<canvas id="rangearea" width="80" height="80"></canvas>
上のrangeの数値に合わせて、...
0
票
1
回答
511
閲覧数
canvasで書いた線を曲線にしたい
canvasで線を書くときに、
太字になるとどうしても線が荒くなり綺麗な曲線を描けません。
下記参照
下のリンクのサイトでは、綺麗な曲線になっていて、どのように書かれているのか分からず、
同じような曲線を描きたいのですが、
どのようなjsの記述が必要でしょうか。
リンクの説明をここに入力
2
票
2
回答
7,325
閲覧数
JavaScript で Base64 エンコードをして Canvas に画像を表示
function addMessage (value,color,size) {
var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
var image = new Image();
var image.src = " "data:...
3
票
0
回答
661
閲覧数
Android Chrome 40でのCanvasの表示崩れ
Canvasの2D描画でfill()とstroke()が混在している場合、特定のAndroid端末のChromeで表示が崩れます。
具体的には、異なる2つの形状をそれぞれfillおよびstrokeで描画すると、最初に描画した形状が2つ描画されます。(つまり後に描画したものが間違って描画される。)
コード:
<head>
<script>
...