【IE11対応】clip-pathを使用せずに動画をテキストやシェイプでマスクする方法 - Qiita
テキストでマスク See the Pen Cool UI - Mask the Video with TEXT by Loki (@loki__codepen) on CodePen. パスの描画（シェイプ）でマスク See the Pen Cool UI - Mask the Video with Path by Loki (@loki__codepen) on CodePen. SVGデータそのままでは実装できません。一度canvasタグ内のJSで描画できる記述方法に変換してあげる必要があります。 手持ちのSVGデータでマスクを取りたい場合は、以下のサイトで<path>タグをCanvasRenderingContext2Dに変換すると良いでしょう。 SVG to HTML5 Canvas Converter http://www.professorcloud.com/svg-to-ca
２次元ランダムウォークを可視化する - Qiita
はじめに 前の投稿では、1次元ランダムウオークのプログラムを書いたので、今度は2次元ランダムウォークのプログラムを書いてみました。 (x,y)にある点の次の位置を(x+1,y) (x-1,y) (x,y+1) (x,y-1)の4つとし、それぞれが、1/4の確率である場合の動きを可視化するプログラムです。 この記事の最後に、CodePenのページを埋め込んでいるので、動きを確認できます。 MyCanvasクラス 1次元ランダムウォークの時と同じように、まず、MyCanvasクラスを定義します。 class MyCanvas { constructor (id, width, height) { this.canvas = document.getElementById(id); this.ctx = this.canvas.getContext('2d'); if (width) this.
HTML5のCanvasを使いやすくするライブラリまとめ
HTML5のCanvasを使いやすくするライブラリまとめ HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。 投稿日2013年12月20日 更新日2014年02月08日 CREATEJS CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。 Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。 sample code var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild(circl
HTML5+Canvasでランダムな方向に移動するカラフルパーティクル
HTML5+Canvasでランダムな方向に移動するカラフルパーティクル 以前の記事で「HTML5+Canvasでパーティクルっぽいのを作ってみる」というのを作成しましたが、横の移動だけだったのであまり面白くありませんでした。 今回は横だけではなく縦や斜めにの方向にランダムにパーティクルを移動させたいと思います。 投稿日2017年07月19日 更新日2017年07月19日 HTML + CSS 画面幅いっぱいに表示させたいのでcanvasをdivで囲んでます。 canvas-txtにcanvasの上に表示されるコンテンツを配置します。 html <div id="canvas-wrap"> <canvas id="canvas-container"></canvas> <div id="canvas-txt"><p>CONTENTS</p></div> </div> CSSです。 今回はwi
javascriptで画像を分割してみた | GROUP DEV BLOG | TECHNO MOBILE
アイキャッチで使用させていただいた画像はPixabay様からお借りしました。 こんにちは、新卒のshiroです。 便利なフレームワークなどが多々存在する現在、今回はあえてそれらを使わずjavascript（と、記述の簡便さを求めてjQuery）で画像の分割処理を作成していきます。 作成するものはセンタリングしてトリミングであったり、幅や高さに合わせたトリミングであったりはしません。 同一サイズのタイルが複数枚で1つになっている画像ファイルを分割するものになります。 下記がイメージとなります。 なお、今回はローカルでの動作はfirefoxで確認しました。 chromeの場合、通常はクロスドメイン制約で弾かれます。 まずは画面呼出後の処理です。 $(function() { // 分割する幅と高さを指定する // 画像を割り切れれば幅と高さは何でもよい var width = 32, heig
CANVASでドキドキする「アルファマスクアニメーション」を作ろう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、フロントエンドエンジニアのドリルです。今年の３月に入社いたしました。 「ドリル」というあだ名には、「深く掘り続ける、探求する」という意味があります（名付け親はLIGのデザイナー、藤田さんです）。今後はLIGブログでもさまざまなトピックを掘り下げて書いていきたいと思うので、どうぞよろしくお願いいたします！ さて今回は、CANVASでアルファマスクアニメーションを作る方法をご紹介します。 今回のゴール こちらが完成形です。スポットライトを当てたような表現など、アニメーション表現に応用できます。ちなみにIE11対応です！ See the Pen CANVAS – ALPHA MASK by Sho Shindo (@kabukimono) on CodePen. 何かドキドキする動きですね。まさかツインテールだったとは。 用意するもの ２つの画像を準備します。 背景jpg画像(今回
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
forked: 桜吹雪 - jsdo.it - Share JavaScript, HTML5 and CSS