Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
Canvas勉強会
[React Native Tutorial] Lecture 7: Navigation - Scene Transition - ListViewKobkrit Viriyayudhakorn
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.
jQueryとcanvasを使ってイメージマップでhoverすると色かわるみたいな〜 - w7工廠
サンプルはこちら→W7工廠分室|トップページ ■目的 イメージマップってマウス乗っても色変わらないし〜、ロールオーバー時の画像を１つずつ用意するのって面倒だし〜 ・・・とかそういう場合にどうぞ。 図で表すとこうなります。既存のイメージマップの下にcanvasを(以下略w) ■仕様 ・XHTML1.0, HTML4.01/5で動作します ・ブラウザは各種最新版でチェック、IE6〜IE8もチェック ・altへのアクション(ツールチップ的な説明)も考えていたのですが、別ツールのほうがいいと思いやめましたw ■不具合 ・IE7でimg要素とcanvas要素が少しずれる(imgのopacity=0でもいいかも) ・IE9のDOCTYPE無指定で動作しない←IE判定部分をかえれば多分いけます ・IE6のHTML5で動作しない ■注意事項 ・img要素はz-index:1以上であること ・usemap属
uuCanvas.js - README
Support information - サポート情報 uuCanvas.js は IE 以外のブラウザに対しても機能拡張を行います。 Extend Text API Opera9.2 - DOM を利用した Text API が使用可能になります。Matrixによる変形や回転は非サポートです。Text Shadow は非サポートです。strokeText() は fillText() と同じ結果になります。maxWidth は非サポートです。 Opera9.5～10 - SVG を利用した Text API が使用可能になります。Matrixによる変形や回転をサポートします。Text Shadow をサポートしますが、影の品質に多少問題があります。strokeText() は fillText() と同じ結果になります。DOM を利用した Text API も利用可能です。maxWid
HTML5 canvas関連API - web探検隊
canvas要素が持つプロパティ/メソッドプロパティ説明widthキャンバスの領域の幅(ピクセル)。省略時は300ピクセル。canvasタグのwidth属性に対応。heightキャンバス領域の高さ(ピクセル)。省略時は150ピクセル。canvasタグのheitht属性に対応。toDataURL(type,args)キャンバスの内容をdata URL文字列で取得。getContext(cibtextId)描画コンテキストを取得。引数に"2d"を指定すると、2次元グラフィックス用のコンテキストを取得出来る。 2D描画コンテキストが持つプロパティ/メソッド2Dグラフィックスの描画を行うためのコンテキスト(canvas.getContext("2d")で取得可能)が持つプロパティやメソッドです。プロパティ説明canvasこの描画コンテキストの基になったcanvas要素への参照。save()描画コン
【HTML5】Canvasでお絵かきしてみた（前編）
こんにちは、橋本です。 今回はHTML5シリーズ第二弾ということで、canvasを使ってお絵かきしてみました。 今回は前編で、基本的な機能について触れてみたいと思います。 さっそくサンプルコードを以下に。 canvas_sample.html <html lang="ja"> <head> <meta charset="UTF-8"> <script src="js/canvas.js" type="text/javascript"></script> <link media="all" rel="stylesheet" href="css/main.css" type="text/css" /> <title>canvas test</title> </head> <body> <div id="container"> <div id="leftContainer" class="cle
ExplorerCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages. Overview Sample pages using the canvas tag are included with the source code. For more information about the canvas tag,
canvasに描いた絵（画像）をサーバに保存 - 超自己満足プログラミング
canvasに描かれたデータを取得するには、canvas.toDataURL() を使います。 toDataURL()で得られるのは、base64エンコードされた画像情報なので、 それをサーバに送って、base64デコードして保存という流れです。 toDataURL()して、そのデータをPOSTする部分のjavascript (ajax部分が面倒なので、prototype.jsを使用) function saveImage() { var imgdata = $('canvas_id').toDataURL(); // デフォルトだとpng, 引数でjpegとかも可能 imgdata = imgdata.replace('data:image/png;base64,', ''); // 頭のいらない部分を落とす new Ajax.Request(<画像保存CGIのURL>, { param
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
HTML5 Canvas Cheat Sheet
古いIEでもHTML5 canvasを使えるようにするJSライブラリ「explorercanvas」