タイトル「Canvas2」を検索 - はてなブックマーク

1 - 16 件 / 16件

新着順人気順

絞り込み

検索対象
ブックマーク数
期間
セーフサーチ

Canvas2の検索結果1 - 16 件 / 16件

GitHub - joshmarinacci/node-pureimage: Pure JS implementation of the HTML Canvas 2D drawing API
- 15 users
- github.com/joshmarinacci
- テクノロジー
- 2023/10/28
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
- JavaScript
- あとで読む
- library
- API
- github
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ | AndHA Blog
- 7 users
- and-ha.com
- テクノロジー
- 2021/10/29
【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ公開日 : 2021.10.29 最終更新日 : 2022.10.06 コーディング「WebGL」が多くのサイトで使われるようになって来ていますが、それに合わせて「Canvas2D」という言葉も多く聞こえて来るようになってきています。 Canvas2Dとは何のことか分からない人から学び初めの人に向けて、見るべき有料サイトや書籍をまとめました！ぜひ確認してみて下さい！【Canvas2Dとは】canvasタグにおける「getContext(‘2d’)」って何？を説明します Canvas2Dのことを優しく例題を使いながら説明してくれています。まずはこちらのサイトから概要を掴むのが良いかと思います。 https://blog.framinal.life/entry/2020/03/29/084651 canvasのgetCon
- JavaScript
- あとで読む
Canvas 2Dベースの高速で軽量、さまざまなタイプのチャートに対応できるオープンソースのチャートライブラリ・「μPlot」
- 3 users
- kachibito.net
- テクノロジー
- 2020/08/13
- Canvas
- グラフ
- ライブラリ
- Javascript
- Ajax
GitHub - jagenjo/litegraph.js: A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs
- 3 users
- github.com/jagenjo
- テクノロジー
- 2019/12/02
Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture) Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...) Optimized to support hundreds of nodes per graph (on editor but also on execution) Customizable theme (colors, shapes, background) Callbacks to personalize every action/drawing/event of nodes Su
- visualization
- github
It's always been you, Canvas2D | Blog | Chrome for Developers
- 2 users
- developer.chrome.com
- テクノロジー
- 2022/03/05
In a world of shaders, meshes, and filters, Canvas2D might not get you excited. But it should! 30–40% of web pages have a <canvas> element and 98% of all canvases use a Canvas2D rendering context. There are Canvas2Ds in cars, on fridges, and in space (really). Admittedly, the API is a bit behind the times when it comes to state-of-the-art 2D drawing. Fortunately we've been hard at work implementin
Canvas 2Dリファレンス - とほほのWWW入門
- 2 users
- www.tohoho-web.com
- テクノロジー
- 2021/06/01
<!DOCTYPE html> <html> <head> <title>CANVAS TEST</title>  <script> window.addEventListener('load', function() { var cv = document.getElementById('cv1'); // 要素を得る if (!cv) { return; } var ct = cv.getContext('2d'); // 2D(平面)コンテキストを得る if (!ct) { return; } ct.fillStyle = '#ffcccc'; ct.fillRect(0, 0, cv.width,
- HTML
Canvas2D ４点グラデーショングリッドの実装実験 - Qiita
- 1 user
- qiita.com/warotarock
- テクノロジー
- 2022/12/14
この記事は Web グラフィックス Advent Calendar 2022 の14日目の記事です。自作お絵かきツールで線をはみ出さないでブラシ塗りがしたい個人的に今年のアドベントカレンダーでは自作ツールでブラシ塗りがしたいということで色々やっていて、前回は４点グラデーションを実装してみました。今回はそれをグリッド状に並べ、ブラシ塗りをしてみたいと思います。描画処理の概要色情報を持った点をグリッド状に並べ、点４つごとに４点グラデーションを描画します。上の図はグリッドのセルを極端に大きくしています。セルを小さくしてグリッドの解像度を上げると、ビットマップをバイリニア補間で拡大した感じ（原理的にはそのもの）になっていきます。ジャギーのようなものが見えますね。そこで本題の、グリッドを変形させていい感じにするのをやりたいところです、が・・・。明度の勾配をもとにしたシミュレーション
Canvas2D マスク処理によるはみ出さないブラシ塗りの実装実験 - Qiita
- 1 user
- qiita.com/warotarock
- テクノロジー
- 2022/12/19
この記事は Web グラフィックス Advent Calendar 2022 の17目の記事です。（二日遅れ・・・）自作ドローツールで線をはみ出さない塗りがしたい筆者が個人で作っているElectronベースのドロー系ツールで線をはみ出さない塗りがしたいということで、前回まで色々とやってきました。今回は、ついに最終回といいますか、現状の最終案をご紹介したいと思います。課題もありますが、いちおう自作ツールにも組み込んでみた方法です。処理の概要一口にはみ出さないといっても色々ですが、今回の方法では、ブラシの中心から見て線分によって遮蔽される部分をはみ出すと考えます。ブラシは複数の線分で遮蔽される場合がありますので、どこが遮蔽されるのかを「遮蔽マップ」に書き込みます。遮蔽マップは、ブラシ中心を中心として、角度ごとに一番近い線分との距離を記録したものです。遮蔽されない角度はブラシ半径と等
Canvas2Dアニメーション基本のキ
- 1 user
- zenn.dev/con_ns_pgm
- テクノロジー
- 2022/09/14
はじめにブラウザ上に、JavaScript(など)を用いて自由にグラフィックを描画できるCanvasという技術。文字通り、真っ白なキャンバスに筆を下ろして絵を描くが如くその可能性は無限大です。(やかましい) 今回は、基本的な描画方法に関する記載は致しておりません。アニメーションの基盤となる考え方や手法について焦点を当てて書いてみようと思います。 (基本的な描画方法から知りたい方は、以前の記事をご覧頂けますと幸いです) と言っても、だいぶCanvasにわかなので間違いなどあるかと思われます。その際は、優しい口調でご指摘頂けますと大変嬉しい限りでございます。この記事の目指すところこの記事の対象としては、前回の「Canvas2Dチョットワカルへの第一歩」の記事を読んで頂いて基本的な描画方法についてご理解頂けている且つ、三角比について最低限の理解がある方を想定しております。 (自
Canvas2D ４点グラデーションの実装実験 - Qiita
- 1 user
- qiita.com/warotarock
- テクノロジー
- 2022/12/11
この記事は Web グラフィックス Advent Calendar 2022 の11目の記事です。簡単にきれいなグラデーションがしたい筆者は個人でドロー系のお絵かきツールを作っています。前回は放射状グラデーション（RadialGradient）を細分割して線をはみ出さないようにしてみましたが、パフォーマンス面で問題がありました。放射状だけで塗ることに限界を感じたため、もっと他のアプローチを考えてみました。考えてみると、イラストなどの絵を描くために塗りつぶしをする場合、ベタ塗りだけで用が足りるとは限りません。色や濃淡を変えながら塗るわけですが、できるだけ簡単にきれいにグラデーションさせることができたら嬉しいです。また、ドロー系ツールなので、後からデータを変更するのが楽であるという強みを生かしたいです。４点グラデーション(Quad gradient) で、思い当たったのが、色を持った
Canvas2Dについてさっくり復習してみた - Qiita
- 1 user
- qiita.com/ryokio0129
- テクノロジー
- 2020/12/06
概要 ryokio0129です。 JavaScript Advent Calendar 2020 6日目になります。初参加です。よろしくお願いいたします。 canvasへの描画に関して、昨今色々なフレームワークやライブラリがあり、そちらを使うことが多いと思います。かくいう私も、仕事では Phaser というHTML5ゲームフレームワークを使っていることが多いです。そんな中、たまたま素のCanavs2Dを触らないといけない状況が発生したので、さっくり復習していきます！ Canvas2Dをさっくり復習するどん Canvas2Dのコンテキスト取得 WebGLにしてもCanvas2Dにしても、HTMLCanvasElementからコンテキストを取得しないと描画できないです。 Canvas2Dに関してはCanvasRenderingContext2Dを取得します。 See the Pen Ca
[iOS15 Safari] Canvas2Dの文字列描画でページがクラッシュする場合がある - Qiita
- 1 user
- qiita.com/inonote
- テクノロジー
- 2021/09/22
クラッシュする条件 iOS 15 で Safari などの AppleWebKit エンジンを使用しているブラウザ。 Canvas2D で ASCII 文字以外を描画しようとしている。 font-family に -apple-system が含まれている。フォント設定値が 20px -apple-system のように、font-size と -apple-system が隣接している。問題のコード let ctx = canvas.getContext("2d"); ctx.font = "20px -apple-system"; ctx.fillText("日本語文字列", 20, 20);
Canvas2D RadialGradientのパフォーマンス検証 - Qiita
- 1 user
- qiita.com/warotarock
- テクノロジー
- 2022/12/01
この記事は Web グラフィックス Advent Calendar 2022 の1日目の記事です。ご挨拶 Webグラフィックスアドベントカレンダーの季節がやってきました！だんだん参加者数が寂しくなってきていますが、筆者は今年もまた重箱の隅をつつく記事を投稿したいと思います発端：自作お絵かきツールでブラシ塗りがしたい個人でElectronで動作するドロー系の絵かきツールを作っています。データをビットマップで持つのではなく、ベクトルデータで持つことで、後から修正しやすいのが売りのつもりです。 HTML/Canvas2Dで作っているので、Canvas2Dの基本機能だけで描画しようとすると滑らかなグラデーションで複雑な図形を塗りつぶすのは意外と難しかったりします。やり方は色々あるわけですが、いちばん基本的な方法と思われるのが、パスで囲んだ領域を塗りつぶす方法です。ただ、この方法だと基
Flash Advent Calendar 5日目 - Canvas2D - - Qiita
- 1 user
- qiita.com/ienaga
- テクノロジー
- 2020/12/06
将来的にはWebGLに移行する事になるのですが初期はCanvas2Dを利用して描画を作っていました。その中で得られた知見を書こうと思います。 Flashの描画手法 Flashの描画は基本、一筆書きでです。使われる関数も3つです。移動(moveTo) 直線(lineTo) 曲線(quadraticCurveTo) どれだけ複雑な表現でもこの仕様で実現されており結構、男前な仕様だと思ってます。ただ、この一筆書きがかなり難解でした。。。参考資料 Canvas2Dを利用した方であればえ？無理じゃない？？っとなると思います。実際、この仕様をCanvas2Dで再現するのにかなりの時間を使いました・・・まずは、同じ色をまとめる事からはじめました。分解と結合参考資料のDefineShapeの描画を分解すると、こんな感じになります。 ※ s=開始点、e=終点一筆書き問題は、この
Canvas2 - Wikipedia
- 1 user
- ja.wikipedia.org
- 学び
- 2022/07/10
『Canvas2』（キャンバスツー）は、F&C・FC01より発売された18禁恋愛アドベンチャーゲーム、また同ゲームを原作とするアニメ作品である。2004年4月23日に『Canvas2 〜茜色のパレット〜』（ - あかねいろのパレット）が発売され、2005年10月から2006年3月まで『Canvas2 〜虹色のスケッチ〜』（ - にじいろのスケッチ）のタイトルでテレビアニメ（UHFアニメ）が放送された。 2006年1月26日には副題をアニメと同じ「虹色のスケッチ」に変更したPlayStation 2版が角川書店より発売され（CERO対象年齢：15歳以上）、同年10月6日にはF&C・FC01より「虹色のスケッチ」の追加要素を含む逆移植版『Canvas2 DVD EDITION』が発売された。ダウンロード版もある。概要[編集] 本作品は『Canvas 〜セピア色のモチーフ〜』の続編にあたる。前
Canvas2D RadialGradientの細分割による線をはみ出さない塗りの実験 - Qiita
- 1 user
- qiita.com/warotarock
- テクノロジー
- 2022/12/07
この記事は Web グラフィックス Advent Calendar 2022 の6日目の記事です。自作お絵かきツールで線をはみ出さないでブラシ塗りがしたい自作ツールでブラシ塗りがしたいということで、前回は放射状グラデーション（RadialGradient）のパフォーマンスを検証しました。 PC上でイラストなどの絵を描くためのソフトウェアは一般的にペイント系とドロー系に分けられると思いますが、筆者が今作っているツールはドロー系です。つまり、データをビットマップで持つのではなく、ベクトルデータで持します。それにより、後から修正しやすいのが売りのつもりです。しかしドロー系なので、色を塗ったときに線からはみ出した部分を消しゴムで消す、ということが技術的に難しかったりします。消しゴムデータが肥大化したり、重ね合わせの問題が生じたりするからです。また、そもそも消しゴムで消す作業を無くしたいとい