知られざる globalCompositeOperation テクニック
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 HTML5 の Canvas はかなりの機能を有しております。Flash Player の実装にあたってこれらの豊富な Canvas の機能は大変有用なのですが、そんな中でも globalCompositeOperation というマイナー機能の活用方法は、今の時代でも十分に応用が効く知識です。Flash 終了への手向けとして、ここにその機能の素晴らしさと有効利用の方法を改めて紹介致します。 HTML5 (canvas) の globalCompositeOperation とは 一言で言うと、globalCompositeOperation は Composite すなわち合成方法の指
さまざまな図形を描く - Canvas - HTML5.JP
Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形（長方形） 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ
キャンバス API - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback キャンバス API (Canvas API) は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。 キャンバス API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウ
JSXでCanvasを使う方法
※この記事は、JSX Advent Calendar 2013の一部です。 JSXは型付き言語なので、JavaScriptで簡単に書ける内容が複雑になってしまうこともあります。Canvas周りでは特にその傾向が強いので、ここではJSXでCanvasを扱う書き方を簡単にご紹介します。 まずCanvasの作成です。Canvasの型はHTMLCanvasElementとなります。 var canvas = dom.document.createElement("canvas") as HTMLCanvasElement; JSXにはグローバル変数は存在しません。JavaScriptのグローバル変数（正確にはグローバルオブジェクトのプロパティ）documentにアクセスするためには、JSXではdomのプロパティとしてアクセスします。dom.window.documentとアクセスしても同じです。
Chrome+HTML5 Developers Live Japan #5
2. 2 Broadtail Confidential Confidential2 • このスライドは、 Chrome+HTML5 Developers Live Japan #5 にて使用予定のスライドです。 • 以下のURLからライブの様子をご覧いただけます – https://plus.google.com/events/cmmlimc40bamuk1la1qjgk2unh8 – ライブコーディング等を予定しておりますので、是非実際 の映像と共にお楽しみいただければと思います。 ネットでこのスライドを見ている方へ 3. 3 Broadtail Confidential Confidential3 • 紀平 拓男（きひら たくお） – 株式会社ディー・エヌ・エー – @tkihira – DeNAにおいてHTML5の総括を担う • 会社を2つ設立したシリアルアントレプレナー • HTM
canvas : 画像の合成方法いろいろ - WebOS Goodies
使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形（パス or ビットマップ画像）、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています（簡
HTML 5＋JavaScriptでCanvasアプリを作る
次世代HTML標準「HTML 5」とは？ 現在、XHTML 1.0がWeb制作の現場では当たり前のように使われていますが、HTML 4.01の次バージョンにあたる「HTML 5」という規格が次のHTML標準となりそうです。 HTMLからXHTMLの進化によって属性値をクオートで囲むとか、空タグもきちんとスラッシュで閉じるといったXHTMLコーディングのお約束が、Web制作者側に当然のように強いられてきました。こういった厳密なコーディングを必要とするXHTMLは、HTMLのような良い意味でのシンプルさが無かったため、結果的に爆発的な普及にはいたりませんでした。 現場のWeb制作者たちが集まって発足された非公式な団体「WHAT WG」が2004年6月に発足されました。WHAT WGは独自に「HTML 5」の仕様策定をスタートさせ、その3年後となる2007年5月に標準化団体であるW3C内にて標準
CoffeeScriptとCanvasでスパロボ風シミュレーションRPGを作る（準備） - None is None is None
プロローグ 第２次スーパーロボット大戦OGが発売延期になりました。せっかく、アニメ版OG2で盛り上がっていたところなのに実に残念です。 もっと残念なことは、たとえ発売されたとしても第２次OGは、プレイステーション３用であるということです。もうあの懐かしいゲームボーイアドバンスでOGシリーズが発売されることはありません。アドバンス後継であるＤＳや３ＤＳで発売されることも無いでしょう。 もう私たちは、ソルプレッサに阻まれ、１回の敵フェイズにリセットを１０回繰り返すことは無いのでしょうか？ もう私たちは、フェアリオンを１体ずつ動かして、うっかりゴールドの方を撃墜してしまうことは無いのでしょうか？ もう私たちは、最強武器M950マシンガンを使うことは無いのでしょうか？ もう私たちは、究極！ゲシュペンストキックの連続攻撃で敵を４体蹴り抜くことは無いのでしょうか？ こうなったら自分で作るしかありません
HTML5とJavaScriptで作られた自動車の進化シミュレーターがかわいい | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー 自動車の進化シミュレーターを見つけました。いわゆる遺伝的アルゴリズムを使って，二輪車の形状を突然変異させながら，でこぼこ道をスイスイ走れるような形状に進化させてゆくシミュレーター。突然変異率などを変えて，進化の過程を目で確認できるようになっている。 HTML5(Canvas)とJavaScriptを使っていて，ブラウザだけで動くよう作られている(Chrome推奨，重いけどiPhoneやAndroidでも動く)。進化の過程でいろいろな形の車ができておもしろい。最初からコケて走らないヤツ，平らな道では早く走るけどでこぼこ道で動かなくなるヤツ，遅いけど悪路に強いヤツ。見ていると進化する車を応
サーバサイドでCanvasを利用する(node.js)
こんにちは、中川です。 今年も残すところあと１週間をきりましたね。 このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。 さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。 それでは、早速使ってみましょう。 ■今回の環境 Ubuntu 10.10 node.js v0.3.1 npm 0.2.12-1 node-canvas v0.4.1 ■インストール node-canvasでは、cairoを利用しますので、事前にインストールします。 // sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,20
HTML5のcanvas要素でライフゲーム - yattのブログ
初めてPhotoShop使ってみた HTMLの次世代規格であるHTML5にはWeb Socketsやvideoなどおもしろいタグや機能が追加される予定、らしいです。 その中でもcanvasタグという、javascriptで画像を制御するためのタグがあります。今回はそのタグとタイマーイベントを使ってライフゲームのアニメーションを実装しました。 デモ 状態を一つの整数で表すナイーブな実装になっています。次のような高速化が考えられそうです。 一つの変数に複数のセルの状態を記録させる セルの状態はon/offの2つしかないので1ビットに表せるわけで、1つの整数に複数のセルの状態を記録させて省メモリで高速な処理ができるはず。 WebGLを使う 上の案に加えて、ブラウザからOpenGLを使う技術のWebGL使えば計算と描画までかなり高速にできそう。プログラマブルシェーダ上で計算と描画までしてしまえば、
Loading
Videos Watch and learn from our engineers as they show how to bring the latest web technologies to your websites on Safari. Watch Safari and Web Videos Forums Ask questions and discuss a variety of web development topics with Apple engineers and other developers. Apple Developer Forums Safari Extensions Safari extensions are a powerful way to add new features to Safari. They are built in Xcode wit
InfoQ: HTML5のケーススタディ：WebSockets, Canvas そして JavaScriptで noVNCクライアントを作成
原文(投稿日：2010/07/01)へのリンク noVNC は、VNCクライアントで、 HTML5 WebSockets, Canvas そして JavaScriptを使って実装されている。InfoQ、は、 Joel Martin氏と、 noVNCと HTML5アプリケーションの開発経験について、少しばかり、Q&Aを持った: InfoQ: Joelさん、noVNCのアーキテクチャの全体像と様々なコンポーネントがどのように、いっしょになっているのか，教えてください。 Joel: noVNCのアーキテクチャは、６つの主要なコンポーネントからできています: コアの VNC/RFB実装: このコンポーネントは、すべてのRFBプロトコルの情報をカプセル化していて、他のすべてを動かす、主要なステートマシンです。 Canvas抽象層: このコンポーネントは、 HTML5 CanvasAPIを抽象化した層
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN
HTML5とCanvas 2Dの機能が完了した
GitHub - Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS.
IBM Developer
declitimg.js
5509.me
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot