GitHub - gliffy/canvas2svg: Translates HTML5 Canvas draw commands to SVGYou 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
Integrated Terminal Performance Improvements
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 surprising, but rendering an interactive terminal was possible in a system desig
けものフレンズ ロゴジェネレータ
けものフレンズ ロゴジェネレータ！ ↓ここに もじを いれてね！ もじが かけたら、 ロゴがぞうをダウンロード！ボタンをおして がぞうを ほぞんしよう！ すまーとふぉんなら ロゴを長押しして『画像を共有』をするか、スクショでもいいとおもうよ。 おもしろかったら 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.