タグ「Canvas」 - はてブログ

タグ Canvas

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 85件)

SVGやCanvasで実装した平らな要素を3Dモデルでレンダリングできる超軽量JavaScriptライブラリ -Zdog | コリス

2019/06/07 57 users コリス canvas SVG ドラッグデモ

面白そうなJavaScriptがリリースされました！ SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。 Zdog Zdog -GitHub Zdogの特徴 Zdogのデモ ... 続きを読む

Google、ブラウザベースのお絵かきアプリ「Canvas」をリリース - Engadget 日本版

2018/12/21 73 users スタイラスブラウザベースウェブアプリ Pwa canvas

Googleが、Chrome OSの早期開発チャンネルDevとCanary向けに、スタイラスをサポートした描画アプリ「Canvas」をリリースしました。Chrome OS向けとはいえ、ウェブアプリとしてリリースされているので、PCやAndroidからも利用できます。 Canvasは、Chromeブラウザからcanvas.apps.chomeにアクセスするだけで利用可能。PWA... 続きを読む

斜めに写った画像をCanvasで矩形に補正する - すぎゃーんメモ

2018/09/03 211 users canvas 矩形すぎゃー人力ラベル

将棋駒画像分類の話の続きのような、あんまり関係もないような。 memo.sugyan.com memo.sugyan.com 結局、素材を組み合わせて自動で生成しただけの駒画像ではやはりデータが足りていないようで、「やはりもっと様々な画像から人力でラベル付けしてデータセットを作っていく必要がありそう」ということになった。とはい... 続きを読む

Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

2018/07/16 346 users Crieit canvas CodePen CSS HTML

ブラウザで見ることができる3Dアクアリウムを作ってみました。これは基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。記事の最後に操作できるCodePenを配置してあるので読むのが面倒な... 続きを読む

ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する | Web Scratch

2017/12/07 99 users setInterval setTimeout timer

複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。例えば、Twitterのようなアプリならば、ポーリングで更新するために setInverval のようなタイマーを回します。また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループを requestAnimationFrame で回します。このように色々なタイマー系が一つの... 続きを読む

本の虫: VS CodeがDOMによるターミナル実装のパフォーマンスを改善できなかったためCanvasに変更

2017/10/05 218 users canvas DOM ターミナル実装クソ

Integrated Terminal Performance Improvements Electronという史上まれに見るそびえ立つクソのようなGUIプラットフォーム上で実装されているVS Codeが、ターミナルの実装をDOMによるものからCanvasによるものに変更したそうだ。これは、DOMによる実装ではパフォーマンスの改善が十分にできなかったからだという。 DOMでターミナルを実装する際の... 続きを読む

lottieが大変よろしいものだった - アナログ金木犀

2017/02/19 58 users Lottie canvas アナログ金木犀結果話題

2017 - 02 - 19 lottieが大変よろしいものだった仕事でかっこいいインタラクションを実装することになって、 canvas でごりごり頑張るかなぁとも思ったのだけど、少し前に話題になったlottieを使ってみることにした。結果、レベルの高いアニメーションをすこぶる簡単に1時間もかからず実装することができた。実際に導入してみるところまで +α を説明してみる。 lottieと... 続きを読む

もうメジャーも設計図もいらない：部屋を丸ごと3DスキャンするiPadアプリの可能性｜WIRED.jp

2017/01/16 97 users メジャー WIRED.jp iPadアプリ設計図丸ごと3D

NEWS 2017.01.16 MON 20:00 もうメジャーも設計図もいらない：部屋を丸ごと3DスキャンするiPadアプリの可能性 2013年にKickstarterで話題となったiPadを3Dスキャナーに変えるデヴァイス「Structure Sensor」のポテンシャルを、さらに引き出すアプリ『Canvas』が登場。素早く、安く、簡単に部屋や物体の3Dスキャンが行え、データからCADデータや... 続きを読む

Gitのコミットグラフを可視化できるGitGraph.jsがおもしろい - Qiita

2016/09/29 141 users Git Qiita コミットログ canvas 可視化

プレゼン資料を作っている時に「このコミットグラフをMarkdownかテキストで書けたらな」と思ったことがある人、結構いるのではないでしょうか。 GitGraph.js を使うと、JavaScriptで記述したコミットログをcanvasを使って可視化できることを知りました。なかなかおもしろいです。準備まず GitGraph.js の JavaScript と CSS ファイルを読み込みます。 G... 続きを読む

[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js | コリス

2016/01/12 60 users コリス GitHub WebGL Modernizr CSS

スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub ... 続きを読む

ワイヤレスなブロック同士を簡単に連携できる MESH を手に入れたので現状で出来ることをまとめてみた - 凹みTips

2015/05/17 66 users Mesh canvas SONY 凹みTips ワイヤレス

2015-05-17 ワイヤレスなブロック同士を簡単に連携できる MESH を手に入れたので現状で出来ることをまとめてみた Gadget Arduino はじめに MESH は SONY によるプロジェクトで、タグと呼ばれるワイヤレスのブロックに備わった機能を Canvas というタブレット上のアプリでつなぎ合わせるだけで、タグ同士が連携する仕組みを簡単に作ることが出来るプラットフォームです。 M... 続きを読む

HTML5 CanvasとWebGLの使い分け―ICS LAB

2015/02/16 166 users WebGL CreateJS canvas ICS池田口頭

こんにちは、ICS池田です。 2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回) が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容も出来る限り記載しました。なお、前編(CanvasとWebGLの比較)と... 続きを読む

[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス

2014/11/14 121 users コリス Demo canvas Step Body

最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む

古めかしいCGを描くためのライブラリ gretro です - 音の鳴るブログ

2014/08/12 120 users canvas モダン 2014-08-12 古い本ブログ

2014-08-12 古めかしいCGを描くためのライブラリ gretro です gretro - JavaScript graphic library for retro CG 最近、昭和っぽい気持ちのCGを描きたい感じで20年くらい前の本を参考にしながら円とか線とか描いて遊んでいたのだけど、古い本を参考したら昭和っぽい絵が描けるというわけではなくて、Canvas に描くとどうしてもモダン... 続きを読む

HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」（1/4）：CodeZine

2014/08/04 89 users canvas CodeZine jQueryライク図形音楽

本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回取り上げるのは、HTML5の機能であるCanvasをより使いやすくするjQueryプラグイン「jCanvas」です。はじめに　HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を... 続きを読む

クッキーより怖いcanvas fingerprintingって何？迂回方法は？ : ギズモード・ジャパン

2014/07/28 308 users ギズモードクッキー canvas YouPorn ジャパン

ニュースクッキーより怖いcanvas fingerprintingって何？迂回方法は？ 2014.07.28 16:00 問題：ホワイトハウスとYouPornが共通でもってるもの、なーんだ？こたえ：canvas fingerprinting 「canvas fingerprinting（canvasの指紋採取）」というのは、最近大手サイトで採用が広まってる新手のオンライン追跡ツールのことです。... 続きを読む

[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js | コリス

2014/05/23 248 users コリス GitHub canvas スクリプト路線図

路線図の入り組んでいるところって、分かりにくいですよね。そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 transitive.js -GitHub 実際の動作は、下記ページで確認できます。デモページ上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小や... 続きを読む

[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map | コリス

2014/05/16 282 users はいらクリッカブル jQuery canvas コリス

日本の都道府県の地図をクリッカブルマップで表示する純国産のjQueryのプラグインを紹介します。地図自体はCanvasで描かれているので、画像を用意する必要はありません。 Japan Map Japan Map -GitHub Japan Mapのデモ Japan Mapの使い方 Japan MapのデモデモはCanvas対応ブラウザでご覧ください。デモページ各都道府県をホバーするとハイラ... 続きを読む

HTML5のCanvasで実装したMicrosoft Office互換ドキュメントツールTeamLabは優れもの | TechCrunch Japan

2014/01/10 77 users canvas TechCrunch JAPAN 優れもの

オンラインドキュメントエディタのGoogle DocsやZoho Docsなどはかなり前から、これでやっとあなたはMicrosoft Officeをご自分のデスクトップから根絶できる、と約束していた。しかし複雑なドキュメントの編集やMicrosoftのファイルフォーマットとの完全な互換性という点では、Webベースのエディタはまだまだ不十分と言わざるをえない。その有利な差別化要因は言うまでもなく、ク... 続きを読む

Google、日本の小中高校生に「Raspberry Pi」でプログラミング実習を開始 -INTERNET Watch

2013/10/29 277 users Raspberry Pi INTERNET Watch

ニュース Google、日本の小中高校生に「Raspberry Pi」でプログラミング実習を開始コンピューターサイエンス教育支援でCANVASと協力（2013/10/29 16:38） Googleは29日、日本のコンピューターサイエンス教育を支援する「コンピューターに親しもう」プログラムを開始した。「コンピューターに親しもう」プログラムは、6～15歳の児童・生徒を対象に、コンピューターやプ... 続きを読む

[JS]リアルさが想像以上！ブラウザのウインドウを窓に喩えて、雨を楽しむ癒やし系スクリプト -rainyday.js | コリス

2013/09/25 222 users コリス canvas head text type

ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。ぼっーと見てると、音まで聞こえてきそうです。 Demo 2 雨はCanvasを使って再現しており、実装は下記のようになります。 <head> ... <script src="rainyday.js" type="text/javascri... 続きを読む

ロゲ会長ジェネレータ

2013/09/10 421 users canvas ジェネレータロゲ会長モダンブラウザかなり

ロゲ会長ジェネレータです。ロゲ会長が発表してくれます。ロゲ会長のジェネレータです。かなり急ごしらえでつくったので出来は荒いです。IEとかちゃんとテストしてません。ちなみにHTML5でcanvasがチャント動くモダンブラウザじゃないとダメです。続きを読む

Happy Elements Labs: 世界平和とAndroid

2013/08/06 80 users Happy Elements Labs Android

2013年8月6日火曜日世界平和とAndroid Tweet エンジニアの草苅です。スマートフォンを扱うエンジニアの皆さんは、日々Android のバグに悩まされているのではないかと思います。弊社も類に漏れず様々な Android のバグと戦っています。特にあんさんぶるガールズ！ではアニメーションはすべて Canvas を利用していることもあり、Android の Canvas 絡みのバグに... 続きを読む

「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -

2013/07/19 135 users canvas IDEA*IDEA Squeeze 透過PNG

「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過... 続きを読む

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

2013/07/17 274 users canvas ハルエ Chart.js グラフ株式会社LIG

こんにちは。デザイナーのハルエです。最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。そこで見つけたのがこれ。「Chart.js」。めちゃくちゃ愛... 続きを読む