2010-11-01から1ヶ月間の記事一覧
Creatures の15Thパーティーに行ってきました。 http://www.creatures.co.jp/これからも、がんばって良い曲を書いてください。
HTML5だと、テクスチャを回転させることができないので、擬似的にラインごとに描画して回転を実現しています。 Sample10.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sample10.html</title> <script> var draw; var SOURCESIZE = {w:64,h:64}; var imag; var wi…</meta></head></html>
Sample09.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample09.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); var img = new Image(); img.src = "img/tree001.png"; c.dra…</meta></head></html>
イメージデータを縦横サイズを変形して描画してみましょう Sample08.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample08.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); var img = new Image(); img.sr…</meta></head></html>
PinファイルをHTML5で描画しようと思います。Sample07.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample07.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); var img = new Image(); img.src =…</meta></head></html>
単色で自由な形の三角形を描画してみましょう Sample06.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample06.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); c.fillStyle = "#999999"; c.beginPat…</meta></head></html>
Sample04.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample04.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); c.strokeStyle = "#ff9900"; c.beginPath(); c.arc(70, 70, 6…</meta></head></html>
Canvasにラインを引いてみましょうSample03.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample03.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); c.lineWidth = 2; c.strokeStyle = "#999…</meta></head></html>
今回はBOXを描いて見ましたSample02.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample02</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var c = canvas.getContext("2d"); c.fillStyle = "#0099ff"; c.fillRect (15, 15, 50,…</meta></head></html>
最近はやりのHTML5に関してサンプルをアップしていこうと思います。 まずは、文字の出力です。 HTML5のCanvas機能を使用して文字を出しています。Sampe00.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>Sample01.html</title> <script> function draw() { var canvas = document.getElementById("canvas1"); var </meta></head></html>…
