Integrated Terminal Performance Improvements
Version 1.90 is now available! Read about the new features and fixes from May. October 3, 2017 Daniel Imms, @Tyriar The rendering engine of the Integrated Terminal has been completely re-written with performance in mind for the upcoming version 1.17 of Visual Studio Code. In this version, we move away from a DOM-based rendering system to using the HTML canvas element. DOM Rendering It's somewhat s
けものフレンズ ロゴジェネレータ
けものフレンズ ロゴジェネレータ！ ↓ここに もじを いれてね！ もじが かけたら、 ロゴがぞうをダウンロード！ボタンをおして がぞうを ほぞんしよう！ すまーとふぉんなら ロゴを長押しして『画像を共有』をするか、スクショでもいいとおもうよ。 おもしろかったら Tweet もしてね！
Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN
セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。 概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。 描画へのステップ 唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
Gitのコミットグラフを可視化できるGitGraph.jsがおもしろい - Qiita
プレゼン資料を作っている時に「このコミットグラフをMarkdownかテキストで書けたらな」と思ったことがある人、結構いるのではないでしょうか。 GitGraph.js を使うと、JavaScriptで記述したコミットログをcanvasを使って可視化できることを知りました。なかなかおもしろいです。 準備 まず GitGraph.js の JavaScript と CSS ファイルを読み込みます。GitHub からソースをcloneするなり、bowerを使うなり、CDNを使うなり、お好みで。ここではコミットグラフを定義するコードも別ファイル index.js に書くことにします。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GitGraph.js</title> <link rel="stylesheet" type=
Custom animated cursor via canvas
Warning: don't do this. Stop it! Just. Don't. So there's this hack by Ben Foxall that shows how you can escape the browser window and draw outside the page. I had to try it myself. So here comes: the animated "progress" indicator mouse cursor. Wait what? There exists the ability for your web page to use a custom cursor by providing a URL to an image. But animated GIFs, etc are not allowed. Seems t
Release Version 2.0.0 · chartjs/Chart.js
The release of Chart.js 2.0.0 adds many new features over version 1. Documentation is available at http://nnnick.github.io/Chart.js/docs-v2/ Major new features Charts that combine visual types such as bars and lines Chart titles Built-in legends that are interactive by default New scale types including native logarithmic and time/date support Multiple X and Y axes are supported Stacked bar and are
Aerotwist - The Hack is Back!
Image decoding can be a source of checkboarding and jank. What if there was a way to work around it without resorting to a cluster of horror hacks? Step right up and meet my new friend createImageBitmap! Last updated: 25 Jan 2016 Est. Read Time: 8 min Share this: Twitter Tagged: #images, #perf Heads up: this feature is experimental. It's incoming, pretty great, and I'm excited about its potential,
Canvasでテキスト表示するライブラリ Canvas Text Template | WIZ-CODE.blog
前回のAjax認証とは別の話になりますが、Webサイトのテキストに視覚効果を与える技術に、Text Shadowがあります。WebサイトでText Shadowを実装するのにいくつか方法がありますが、もっともポピュラーなのがCSS3を用いた方法です。SVGも独自のドロップシャドウ効果を実装している他、HTML5のCanvasでもそれは実装できます。また、CSS3について言えば、最新ブラウザでほぼすべての機能が実装されていて、IEバージョン9以下に実装していない機能が多いことを除けば、大部分のユーザーがWebサイトの視覚効果を体験できるようになっています。 実際のところ、CSS3さえあればテキストの視覚効果を実装するには十分でしょう。確かにHTML5のいち機能であるCanvasにも図形描画の他にテキスト描画機能があります。しかし、最近ほとんどのブラウザでCanvasのテキスト描画機能がサポー
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - masakazu-yanai/char-canvas: Draw Tool for Ascii Art.
GitHub - palantir/typesettable: :triangular_ruler: A typesetting library for SVG and Canvas
GitHub - dabanlee/blurify: blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
GitHub - raphamorim/origami.js: Powerful and Lightweight Library to create using HTML5 Canvas
79bf7506c54ea3a11b55c39864f816cb16588bf4 - chromium/src - Git at Google
GitHub - konvajs/react-konva: React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
GitHub - goessner/g2: A 2d graphics command queue micro-library.
geojson.io