ActionScript入門Wiki

Canvas - 図形の描画

2012-05-27T17:36:41+09:00

トップページ > JavaScript > Canvas > Canvas - 図形の描画

矩形の描画

var context = canvas.getContext("2d");
context.fillStyle = "#000000";
context.fillRect(100, 100, 100, 100);
 
context.strokeRect(250, 100, 100, 100);
 
context.fillRect(400, 100, 100, 100);
context.clearRect(420, 120, 60, 60);

fillRect(x, y, width, height)

(x, y)～(x + width, y + height)の矩形領域を塗りつぶす。

strokeRect(x, y, width, height)

(x, y)～(x + width, y + height)の矩形の輪郭だけを描画。

clearRect(x, y, width, height)

(x, y)～(x + width, y + height)の矩形領域を透明色で塗りつぶす。

線の描画

var context = canvas.getContext("2d");
context.strokeStyle = "#000000"; // 線の色
context.lineWidth = 10; // 線の太さ
context.lineCap = "round"; // 線の端の形状
context.beginPath(); // パスの開始
context.moveTo(100, 100); // (100, 100)まで移動
context.lineTo(200, 100); // (100, 100)～(200, 100)までパスを繋ぐ
context.lineTo(200, 200); // (200, 100)～(200, 200)までパスを繋ぐ
context.stroke(); // パス情報を基に線を描画

lineWidth

線の太さを指定する。デフォルト値は1。

lineCap

線の端の形状を決めるためのプロパティ

butt

デフォルト値。終端部分が四角形になる。

round

終端部分が丸くなる

square

終端部分が四角形になる。buttより、線幅の半分の長さだけ両方向に長くなる。

lineJoin

線と線が繋がる接続点の形を設定する。

miter

デフォルト値。尖った角が出来る。

bevel

尖った角の先端を切り取った形。

round

角が丸くなる。

弧の描画

var context = canvas.getContext("2d");
context.fillStyle = "#ed1a3d"; // 塗りつぶし色
context.strokeStyle = "#000000"; // 線の色
context.lineWidth = 5; // 線の太さ
// 円の中心が(100, 100)、半径が50, 0度～270度まで時計回りに弧のパスを作る
context.arc(100, 100, 50, 0, Math.PI * 1.5, false);
context.stroke(); // 輪郭を描画
context.fill(); // 塗りつぶし描画

arc(x, y, radius, startAngle, endAngle, anticlockwise)

円の中心が(x, y)、半径がradius、startAngleラジアン～endAngleラジアンまでanticlockwise回りに弧のパスを作成する。
(anticlockwise -> true:反時計回り, false:時計回り)

ベジェ曲線

var context = canvas.getContext("2d");
context.strokeStyle = "#000000"; // 線の色
context.lineWidth = 5; // 線の太さ
context.moveTo(100, 100);
// 二次ベジェ曲線
context.quadraticCurveTo(200, 150, 100, 200);
context.moveTo(100, 100);
// 三次ベジェ曲線
context.bezierCurveTo(300, 130, 300, 170, 100, 200);
context.stroke();

quadraticCurveTo(cpx, cpy, x, y)

現在位置を開始地点、(cpx, cpy)を制御点、(x, y)を終点とする二次ベジェ曲線のパスを作成する。

bezierCurveTo(cpx0, cpy0, cpx1, cpy1, x, y)

現在位置を開始地点、(cpx0, cpy0)を制御点1、 (cpx1, cpy1)を制御点2、(x, y)を終点とする三次ベジェ曲線のパスを作成する。

ベジェ曲線のアルゴリズムについては、
curveToで曲線を描く
ベジェ曲線を描く
を参照してください。

マスク処理

var context = canvas.getContext("2d");
// 円形のマスク作成
context.arc(150, 150, 50, 0, Math.PI * 2, false);
context.clip();
 
// 矩形を描画しているが、マスクがかかっているので赤い円だけが表示される
context.fillStyle = "#ED1A3D";
context.fillRect(100, 100, 100, 100);

fillRect()やarc()などで図形のパスを作成しておき、その後にclip()を呼び出すと、図形のパス部分だけが描画対象になるマスクを作成することが出来る。

Canvas

2012-05-27T03:22:04+09:00

トップページ > JavaScript > Canvas

Canvas - Canvasの利用方法
Canvas - 図形の描画

Canvas - Canvasの利用方法

2012-05-27T03:21:19+09:00

トップページ > JavaScript > Canvas > Canvas - Canvasの利用方法

Canvasを配置するHTML


 lang="ja">
    
         charaset="UTF-8">
    
    
        ="canvas" width="500" height="500">
            Canvasに対応していないブラウザに対するメッセージ
        </canvas>

Canvasで描画したものを表示するためにcanvasタグを配置する。
width, heightで幅、高さを指定。

JavaScriptでcanvas要素を取得する

window.addEventListener("load", onLoad, false);
 
function onLoad()
{
    drawCanvas();
}
 
function drawCanvas()
{
   var canvas = document.getElementById("canvas");
}

canvas要素に付けたidをもとに要素を取得する。

ブラウザがCanvasをサポートしているかを調べる

var canvas = document.getElementById("canvas");
if (!canvas || !canvas.getContext)
{
    return;
}

canvas要素を取得できていない、またはcanvas.getContext関数が存在しないならばreturnで処理を中断させる。

2Dコンテキストを取得する

var context = canvas.getContext("2d");

2D描画を行うためのコンテキストを取得。

Hello, World!!

var context = canvas.getContext("2d");
context.fillStyle = "#000000"; // 色
context.font = "20px Helvetica"; // サイズ フォント名
context.fillText("Hello World!!", 100, 100); // 表示する文字列, x, y

検証用コード

html


 lang="ja">
    
         charaset="UTF-8">
    
     src="canvas.js">
    
        ="canvas" width="500" height="500">
            Canvasに対応していないブラウザに対するメッセージ
        </canvas>

JavaScript

window.addEventListener("load", onLoad, false);
 
function onLoad()
{
    drawCanvas();
}
 
function drawCanvas()
{
    var canvas = document.getElementById("canvas");
    if (!canvas || !canvas.getContext)
    {
        return;
    }
 
    var context = canvas.getContext("2d");
    context.fillStyle = "#000000";
    context.font = "20px Helvetica";
    context.fillText("Hello World!!", 100, 100);
}

JavaScript - Ajax

2012-05-24T18:34:46+09:00

トップページ > JavaScript > クライアントサイドJavaScript > JavaScript - Ajax

Ajax

AjaxはAsynchronous JavaScript + XMLの略で、画面を遷移せずサーバからデータをロードし、ページを書き換える技術。

XMLHttpRequest

JavaScriptからサーバに対して動的にリクエストを送信するにはXMLHttpRequestを使用する。

var xhr = new XMLHttpRequest();
// 状態のイベントハンドラを記述する
xhr.onreadystatechange = function()
{
    // サーバからのレスポンス受信完了
    if (xhr.readyState == 4)
    {
        // 通信が正常に完了している
        if (xhr.status == 200)
        {
            // サーバからのレスポンステキストを表示
            alert(xhr.responseText);
        }
    }
}
 
// GET形式で第二引数のURLにアクセス
xhr.open("GET", "./test.php");
//　実際にサーバにリクエストを送信する
xhr.send(null);

onreadystate

onreadystateはXMLHttpRequestオブジェクトの状態が変化した際に呼ばれる。
各状態の値はreadyStateプロパティで取得し、値が4になればサーバからのレスポンスを受信し終えたという意味になる。

0	open()が呼び出されていない
1	send()が呼び出されていない
2	サーバからレスポンスが返されていない
3	サーバからレスポンスを受信中
4	サーバからのレスポンスを受信完了

open()

open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])

第一引数	method	HTTPメソッドの指定。"GET"もしくは"POST"を指定する
第二引数	URL	通信先サーバのURL
第三引数	asyncFlag	trueなら同期処理、falseなら非同期処理を行う
第四引数	userName	サーバで認証が必要な場合のユーザー名
第五引数	password	サーバで認証が必要な場合のパスワード

responseText

サーバからのレスポンスは、responseTextプロパティで取得が出来る。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)
        {
            // load.htmlのbody以下をこちらのbodyに追加
            document.body.innerHTML = xhr.responseText;
        }
    }
}
 
// load.htmlを読み込む
xhr.open("GET", "./load.html");
xhr.send(null);

サーバからのレスポンスがhtmlの場合、responseTextでbody以下の内容を取得できる。

レスポンスデータをXMLとして受け取る

>
    >99>
>

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)
        {
            var xml = xhr.responseXML; // レスポンスデータをXMLとして取得
            alert(xml.getElementsByTagName("id")[0].firstChild.nodeValue); // 99
        }
    }
}
 
// load.xmlを読み込む
xhr.open("GET", "./load.xml");
xhr.send(null);

レスポンスデータをJSONとして受け取る

{
    "id":100,
    "name":"JavaScript"
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)
        {
            // レスポンスデータをJSON形式に変換
            var json = JSON.parse(xhr.responseText);
            alert(json.id);     // 100
            alert(json.name);   // JavaScript
        }
    }
}
 
// load.htmlを読み込む
xhr.open("GET", "./json_data");
xhr.send(null);

同一生成元ポリシー

XMLHttpRequestは同一生成元ポリシーという制約によって、通信を行うデータ先が限定される。
具体的には、

プロトコル(http, https等)
ポート番号
ホスト

が一致していないと、そのサーバと通信を行うことが出来ない。

同一生成元ポリシーの制約によって、別ドメインとの通信が出来なくなるが、下記の方法で別ドメインとの通信を行うことが出来る。

JSONP

scriptタグのsrc属性に別ドメインのURL(jsファイル)を指定すると、同一生成元ポリシーの制約関係なしにURL内のコードを実行することが出来る。

callback();

例えば、上記のように関数を実行すると、グローバル領域に存在するcallback関数が実行されることになる。

function callback(arguments)
{
    console.log(arguments);
}
 
// 動的にscriptタグを配置、srcにURLを入れて、URL内のJavaScriptを実行する
var script = document.createElement("script");
script.src = "http://3kyo.sakura.ne.jp/3kyotest/jsonp_test";
document.getElementsByTagName("head")[0].appendChild(script);

なので、前もってcallback関数を定義しておき、src属性に指定するURL内のコードからcallback関数を呼び出し、引数に必要なデータを指定すれば、別ドメインからデータを受け取る事が出来る。

callback( {a:100, b:200} );

特に、引数にJSONデータを渡してクロスドメイン通信を行う仕組みをJSONPと呼ぶ。

JavaScript - 座標

2012-05-21T01:05:41+09:00

トップページ > JavaScript > クライアントサイドJavaScript > JavaScript - 座標

スクリーン座標

document.onclick = function (event)
{
    alert("screen(" + event.screenX + ", " + event.screenY + ")");
}

コンピュータのディスプレイの左上を原点とする座標系。

ウィンドウ座標

document.onclick = function (event)
{
    alert("client(" + event.clientX + ", " + event.clientY + ")");
}

ブラウザの表示領域の左上を原点とする座標系。