WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 - KAYAC engineers' blog
このエントリーは tech.kayac.com Advent Calendar 2015 の4日目のエントリーです。 こんにちは！ 今年の春、カヤックに新卒として入社した、フロントエンドエンジニアの深澤（@takumifukasawa）です。 今回は、「canvasのライブラリは手をつける順番で理解度が大きく変わる」と思った出来事について書きます。 canvasライブラリで表現の幅は広がるが、種類が多くて迷う。 僕は7月に、『1日1jsdo.it』という企画を始めました。主にcanvasの勉強のためです。 これは、「1日に1つプログラムで何か作品を作る → それをjsdo.it(※1)に投稿する」習慣のことです。 途中で1週間ほど間が空いてしまった時期はありますが、この習慣を4,5ヶ月ほど続けていて、いまのところ120個近くの作品が出来上がっています（たいてい、仕事を終えて帰ってから寝るま
[HTML5] Canvasで描画する際に、要素同士が重なる部分のブレンドモードを指定する - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、HTML5 Canvasのブレンドモードについてブログに書きたいと思います。 Cnavasのブレンドモードとは HTML5 Canvas上に、画像・図形・文字などを描画する際に、通常は重なり合う部分は後に描画した内容が描画されると思います。 例えば、以下のコードの場合は、四角形の上に丸が描画されます。 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 四角形を描画する。 ctx.fillStyle = '#cc00cc'; ctx.fillRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2); ctx.fillStyle = '#ccc
![[HTML5] Canvasで描画する際に、要素同士が重なる部分のブレンドモードを指定する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6524e19016fa0e91da58739c831123c2c905509/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F185.jpg)
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
canvas上にHTML要素を置く:JavaScriptメモ - 万象酔歩
canvasはインタラクティブ要素が完璧に欠落しています。それはもう見事な 思い切りの良さです。しかし、実用的ではありません。 リンクやボタンなどのインタラクティブ要素を持ち込むには通常 HTML要素をDOMで張り付けることになります。 ここでは<A>タグを張り付けてみました。 リンク先は下のサンプルコードです。 次のコードでcanvas上の計算で得た位置に<a>タグを出力しています。 <!--[if lt IE 9]> <script type="text/javascript" src="../../../js/excanvas.js"></script> <![endif]--> <div id="area" style="position:relative"> <canvas id="canvas1" width="480" height="400" ></canvas> </di
Blend modes - Wikipedia
A sketch colored digitally with use of several different blend modes in order to preserve the pencil lines and paper texture below the color layers.Blend modes (alternatively blending modes[1] or mixing modes[2]) in digital image editing and computer graphics are used to determine how two layers are blended with each other. The default blend mode in most applications is simply to obscure the lower
How Important is Sex for A Man
While most women let emotional connection take precedence over a physical connection, for men sex is one of the many ways he shows love. There are many different types and shapes to choose from. Contrary to the popular belief that attributes men’s hunger for nasty sex experience as selfish, men look at sex as a path to reach mutual satisfaction, render pleasure and thrill to their partner that is
JavaScript : Canvas (2D, putImageData) でアルファブレンディング。 : typeOf 'aki_mana'
canvas#getContext('2d') で取得する CanvasRenderingContext2D でのハナシ。 一般的には、HTMLImageElement (IMAGE要素) に PNG ファイルを読ませてそれを、drawImage するのが定番なんだけど、テキストデータを解釈して描画する方法を考えるときには、画像を重ね合わせたい時に独自の処理が必要になりそう。 方法は幾つかありそうなのだけど、CanvasRenderingContext2D に用意されたメソッドが globalAlpha 属性や、globalCompositeOperation 属性の影響を受けるかどうかの違いで処理は異なりそう。 １）createImageData() で ImageData オブジェクトを作って CanvasPixelArray を弄り、putImageData() する方法。 この場合
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
transform() メソッド - Canvasリファレンス - HTML5.JP
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-transform サンプル transform() メソッドは、一度セットされると、それ以降に描かれる図形はすべてその変換マトリックスが適用されます。transform() メソッドで変換マトリックスを定義したあとに、別の変換マトリックスを transform() メソッドで定義すると、2つの変換マトリックスを掛け合わせた変換マトリックスが適用された状態となります。 もし、新たな変換マトリックスを適用したい場合は、setTransform() メソッドで変換マトリックスを定義しなければいけないことに注意してください。 では、まず setTransform() メソッドの使い方をみていきましょう。 setTransform() メソッドの例 このサンプルは、
無職のプログラミング HTML5 Canvasの変換マトリックスについて解説してみる
Canvasの transform() メソッドでは、変換マトリックス(Transformation matrix)の変更ができる。 リファレンスでは変換マトリックスの説明が無かったので調べてみた。 なお、Transformation matrix を「変形マトリックス」と訳しているところもある。 参考サイト：Transformation matrix - Wikipedia (日本語版は見つけられませんでした) 1. 変換マトリックスの意味 Canvasの変換マトリックスは、以下の行列で表される。 変換前の座標を(x,y)、変換後の座標を(x',y')とすると、変換式は以下のようになる。 これを展開すると、 となる。 つまり、Canvasの変換マトリックスは、(x,y)に２×２マトリックス を適用し、更に x軸方向にdx、y軸方向にdyだけ移動することを表している。 setTransfo
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
canvas.drawImagで貼り付ける画像を回転させる | iconDecotter-Log
さて今度は回転の話です。これはdrawImageの引数では指定できませんので、変形マトリックスを使います。これもまた2通りのやり方があります。 rotateメソッドでcanvasの変形をしてから、drawImageで貼り付ける transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける rotateメソッドは、簡単に回転の変形をするためのものです。transformは拡大の時も説明しましたが、引数の指定によって回転を扱うこともできます。やはり回転させるだけであれば、rotateの方が簡単です。 rotateメソッドを使って画像を回転させる drawImageする前に、rotateメソッドで回転させるだけでOKです。引数はラジアン角の値にする必要があるので、例えば45度回転させたい場合は、 45 * Math.PI / 180 といった数を指定しなくてはなりませ
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
Canvasとは - Canvas - HTML5.JP
Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。 Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。 実際に、Canvasを使って円グラフを作ってみました。上図はFirefox 2.0での結果をキャプチャーしたものです。Canvasで描かれたのは色がついた図形部分です。Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上であれば、実際のCanvasの動作をご覧頂くことができます。 [Canvasを使った円グラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API