タグ付けされた質問 「html5-canvas」

休業。この質問には、より焦点を当てる必要があります。現在、回答を受け付けていません。 この質問を改善してみませんか？質問を更新して、この投稿を編集するだけで1つの問題に焦点を当てます。 7年前休業。 この質問を改善する 私はHTMLキャンバスライブラリの研究をしていて、この質問に出くわしました。HTMLキャンバスJavaScriptライブラリおよびフレームワークの現在の最新技術は何ですか？それは2010年に尋ねられました。トップの答えは、Fabric.jsでした。もう少し調査を行った後、http： //www.html5canvastutorials.com/に出会いました。速度を上げるために複数のキャンバスを持つことを誇るKineticJsのチュートリアルが特徴です。後でさらに調査を行った結果、速度と機能に関してはCanvasライブラリがいたるところにあるようです。今日のJavaScript Canvasライブラリとフレームワークの現状はどうなっていますか？一番上に出てきましたか？ 編集：ライブラリは常に変化しており、新しいライブラリに関するニュースや情報を求めて最近多くの人々がここに来ているので、質問をよりタイムレスに変更しました。

90 javascript  html  html5-canvas 

キャンバスでいくつかの画像のサイズを変更しようとしていますが、画像を滑らかにする方法がわかりません。フォトショップやブラウザなどでは、使用するアルゴリズムがいくつかあります（たとえば、バイキュービック、バイリニア）が、これらがキャンバスに組み込まれているかどうかはわかりません。 これが私のフィドルです：http：//jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); 1つ目は通常のサイズ変更された画像タグで、2つ目はキャンバスです。キャンバスがそれほど滑らかではないことに注意してください。どうすれば「滑らかさ」を実現できますか？

90 javascript  html  image  canvas  html5-canvas 

私は合計n00bでHTML5、canvas形状、色、テキストをレンダリングするために作業しています。私のアプリには、キャンバスを動的に作成し、コンテンツで埋めるビューアダプターがあります。これは、私のテキストが非常にぼやけている/ぼやけている/引き伸ばされていることを除いて、本当にうまく機能します。私が定義する理由についての他の記事をたくさん見てきました幅と高さではCSS、この問題が発生しますが、私はすべてでそれを定義しますjavascript。 関連するコード（フィドルを表示）： var width = 500;//FIXME:size.w; var height = 500;//FIXME:size.h; var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)"; var context = canvas.getContext("2d"); ////////////////// //// SHAPES //// ////////////////// var left = 0; //draw zone 1 rect context.fillStyle = …

87 javascript  html  html5-canvas 

次の例をご覧ください。 http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; ご覧のとおり、drawImageは自動的にアンチエイリアシングを適用すると言われていますが、画像はアンチエイリアシングされていません。私はさまざまな方法を試しましたが、うまくいかないようです。アンチエイリアス画像を取得する方法を教えてください。ありがとう。

82 html  canvas  html5-canvas  interpolation  antialiasing 

（Chartjs-tsgauge）に基づくゲージチャートを使用しています。ゲージの制限とは別にチャートの背景色を設定したい。Charts.JSが背景をレンダリングする方法に問題があります。私が使用したプラグインには背景に関するコードがないためです。たとえば、制限付きのゲージがあります[0, 20, 40, 60, 80, 100]。[0-30]緑、[30-70]黄、[70-100]赤に設定したい。現在のコード：CodePEN これが私の現在のオプションです。 var ctx = document.getElementById("canvas").getContext("2d"); new Chart(ctx, { type: "tsgauge", data: { datasets: [{ backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"], borderWidth: 0, gaugeData: { value: 7777, valueColor: "#ff7143" }, gaugeLimits: [0, 3000, 7000, 10000] }] }, options: { events: [], showMarkers: true } }); そして、これが背景色を設定するための私のアプローチです。 new …

9 javascript  html5-canvas  chart.js 

これは、Bismonプロジェクト（H2020ヨーロッパのプロジェクトが資金を提供するGPLv3 +ソフトウェア）、git commit内にあり0e9a8eccc2976fます。このドラフトレポートでは、ソフトウェアについて説明します。この質問は、より多くの背景と動機を与えます。これは、（手書きの）webroot / jscript / bismon-hwroot.jsファイルに関するもので、Bismon（libonionの上の特殊なWebサーバー）によってコードが生成されるHTMLページで使用されます。 たとえば、スパンのCSSクラスを追加しましたspan.bmcl_evalprompt（たとえば、ファイルfirst-theme.cssに） JavaScriptをコーディングして、同じスタイル（同じフォント、色など...）を持つキャンバスに（できればjqueryでjcanvasを使用して）テキスト部分を追加するにはどうすればよいspan.bmcl_evalpromptですか？DOMにそのようなスパン要素を作成する必要がありますか？それは単に可能ですか？ 私はLinux上の最近のFirefox（少なくとも68）のみに関心があります。jQueryは3.4です。私はJquery UI 1.12.1 も使用しています 私は私の心の中に持っていたアイデア1つの作成することでした<span class='bmcl_evalprompt'>遠くのブラウザビューポート（またはX11ウィンドウ）からの座標を持つ要素を、例えば時x= -10000とy= -10000 （ピクセル単位）、そしてその後、伝統を使用し、ドキュメントのDOMにその単一ひどく位置付け要素を追加フォントファミリー、フォントサイズ、要素サイズを取得するためのjqueryテクニック。しかし、もっと良い方法はありますか？またはそれを行ういくつかのjquery互換ライブラリ？

8 jquery  html  css  linux  html5-canvas