[B! Canvas] asagi_cのブックマーク

君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。クイズ：どうやって実現する？　webでできるさまざまな表現下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています

asagi_c 2021/07/19

リンク

【WebRTC使ってみた】ブラウザカメラとあそぼ！ | 株式会社ニジボックス

[markdown] どうもこんにちは。本当はいつまでも新人でいたかった、フロントエンドエンジニア大月です。春ですね。さて、昨年9月にリリースされたiOS11でMedia Capture APIがサポートに加わり、iOS版Safariから本体のカメラにアクセスできるようになったようですね。 ## Media Capture APIとは [Media Capture and Streams API (Media Streams) – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Media_Streams_API) 難しいことが色々書いてあります。ざっくりと説明するとWebRTC関連のブラウザ用APIの一つで、これを使うとブラウザからカメラ・マイクにアクセスして動画や音声を扱うことができます。ちな

asagi_c 2019/07/23

リンク

HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer

珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を生成出来る、というWebサービス。線を描いて数枚重ね、パターンのような背景を作成することが出来ます。まだ実用段階とは行きませんけど。簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。使い方はこんな感じ。直感で分かるんじゃないですかね。使い方まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script>で、マークアップ <canvas id="bgCanvas"></canv