京都知事選 現職・山田啓二氏が当選確実

京都知事選 現職・山田啓二氏が当選確実

私も夕方に投票に行ったが、どうもおもしろくない。自公民各党の支援を受けた現職・山田啓二氏と、共産党がゴリゴリ推している門氏の一騎討ち。市民から見ると、結果は告示日に既に見えていた。そんな中での投票はやはり、こう、ワクワク感がない。前回の衆議院選挙は日本全体を巻き込んだ選挙戦争であり、いち選挙区であっても各候補者がお互いを削りあい、私としては投票する候補者は決まっているものの、誰が勝つのかという点に関してはワクワクしていた。しかし今回は。。。

なんかこう、マッタリとした選挙だった。

重ねた画像の表示の仕方を指定する(globalCompositeOperation) [html5 の Canvas を使ってみる：第卌一回]

globalCompositeOperation では、この記述前に描画した矩形の上に、記述後に描画した矩形を載せた際に発生する重なり具合についてあれこれと指定できるみたいだ。

★html 側

<canvas id="globalCompositeOperation"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: globalCompositeOperation で 2 次元描画を行うことの定義
  var c = document.getElementById("globalCompositeOperation").getContext('2d');

// fillStyle で緑の塗りを指定
  c.fillStyle = "rgb(0, 255, 0)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(40, 0, 20, 150);
// globalCompositeOperation の値を source-over に指定
  c.globalCompositeOperation = "source-over";
// fillStyle で青の透明度 50% の塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .5)";
// fillRect で塗りつぶした矩形を描画
  c.fillRect(0, 50, 100, 20);
}

すると、こうなる。source-over では両方が描画されるので、緑と薄い青でできた十字架が描画される。重なっている部分は重ねた青の矩形（the source image）が順位として上に表示される。重ねている青い矩形は透明度を与えてあるので、重なり具合がよく判る。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に source-atop にしてみる。これは重ねられた緑の矩形（the destination image）の領域のみ表示され、重なった部分は重ねた青の矩形（the source image）が順位として上に表示される。

c.globalCompositeOperation = "source-atop";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に source-in にしてみる。これは重ねた青の矩形（the source image）の領域の内、重なった部分のみが表示され、表示される矩形は重ねた青の矩形（the source image）となる。青い矩形を透明にしてあるので、重ねられた側の緑色が透けて見えていないことが判る。

c.globalCompositeOperation = "source-in";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）


次に source-out にしてみる。これは重ねた青の矩形（the source image）の領域の内、重なっていない部分のみが表示される。

c.globalCompositeOperation = "source-out";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）


次からは source の部分を destination に変えた値を入れていく。まずは destination-over をやってみる。これも両方が描画されるが、重なった部分は重ねられた緑の矩形（the destination image）が順位として上に表示される。緑に透明度が影響していないことが判る。

c.globalCompositeOperation = "destination-over";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に destination-atop にしてみる。これは重ねた青の矩形（the source image）の領域のみ表示され、重なった部分は重ねられた緑の矩形（the destination image）が順位として上に表示される。

c.globalCompositeOperation = "destination-atop";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっている）


次に destination-in にしてみる。これは重ねられた緑の矩形（the destination image）の領域の内、重なった部分のみが表示され、表示される矩形は重ねられた緑の矩形（the destination image）となる。

c.globalCompositeOperation = "destination-in";

確認環境：
Firefox 3.6.3、Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70（両方とも重ねられた緑の矩形も表示されてしまっており、さらに緑の矩形に透明度が影響している）


次に destination-out にしてみる。これは重ねられた緑の矩形（the destination image）の領域の内、重なっていない部分のみが表示される。

c.globalCompositeOperation = "destination-out";

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53（重なった部分も表示されている。透明度の影響か？）


今度は lighter にしてみる。これは両方の矩形が表示されるが、重なった部分はそれぞれの色を加算したものとなる。今回は透明度があると判りづらかったため、青の矩形の透明度をなしに、rgb(0, 0, 255) としている。さらに十字架の交差点右下に、色を加算した rgb(0, 255, 255) の矩形も一緒に描画してみた。

c.globalCompositeOperation = "lighter";

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53


次に copy にしてみる。これは重ねた青の矩形（the source image）のみがそのまま表示される。

c.globalCompositeOperation = "copy";

確認環境：
Opera 10.53

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3（全て重ねられた緑の矩形も表示されてしまっている）


最後に xor にしてみる。これは両方の矩形の領域の内、重なった部分以外が表示される。

c.globalCompositeOperation = "xor";

正常に動作しなかった環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53（矩形から透明度を除くと全て正常動作を行うが、今回のように透明度を与えたると、重なった部分まで表示してしまう）


どうも、矩形に透明度を与えることで、透明度を与えられていない矩形にも影響を及ぼすのではないかという気がする。xor だけでなく、destination-atop や destination-in、destination-out においても透明度の影響を受けている。W3C の説明文中にある「opaque」は透明度についての記述ではないと思うけど。。。どうなんだろ。

W3C；
4.8.11 The canvas element — HTML 5

枠を塗った矩形を描く(strokeRect) [html5 の Canvas を使ってみる：第卌回]

fillRect に引き続き、今度は strokeRect(); と strokeStyle で枠線を塗りつぶした矩形を描画してみる。

★html 側

<canvas id="strokeRect"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: strokeRect で 2 次元描画を行うことの定義
  var c = document.getElementById("strokeRect").getContext('2d');

// strokeStyle で赤の透明度 50% に枠の色を指定
  c.fillStyle = "rgba(255, 0, 0, .5)";
// 枠を塗りつぶした矩形を描画
  c.strokeRect(10, 10, 100, 50);
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5

塗りつぶし矩形を描く(fillRect) [html5 の Canvas を使ってみる：第卅九回]

fillRect(); と fillStyle で塗りつぶしの矩形を描画してみる。

★html 側

<canvas id="fillRect"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: fillRect で 2 次元描画を行うことの定義
  var c = document.getElementById("fillRect").getContext('2d');

// fillStyle で青の透明度 80% に塗りを指定
  c.fillStyle = "rgba(0, 0, 255, .8)";
// 塗りつぶし矩形を描画
  c.fillRect(10, 10, 100, 50);
}

すると、こうなる。rect(); と違い、最後に stroke(); を記述しても黒い線は描画されない。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5

指定した座標が描画された範囲に入っているか調べる(isPointInPath) [html5 の Canvas を使ってみる：第卅八回]

isPointInPath(); では、引数で指定した座標が描画されている矩形等の範囲に入っているかを調べ、boolean で返すらしい。

★html 側

<canvas id="isPointInPath"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: isPointInPath で 2 次元描画を行うことの定義
  var c = document.getElementById("isPointInPath").getContext('2d');

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:50 に定義
  c.moveTo(0, 50);
// lineTo(); で x:100、y:50 まで直線を描画
  c.lineTo(100, 50);
// これらの座標に対して線を引く指令
  c.stroke();

// 変数 result に x:50、y:50 が描画範囲内かの結果を代入
  var result = c.isPointInPath(50, 50);
// font で大きな文字を指定
  c.font = "bold 1.5em Times New Roman";
// fillText(); で結果を入れた変数 result を直線の下に描画
  c.fillText(result, 25, 70);
}

すると、こうなる。描画されているのは x:0、y:50 から x:100、y:50 までの直線で、問うてる座標は x:50、y:50 なのでこの直線が通っていることになり、結果 true が描画される。


次に、問う座標を y 軸に -1 して x:50、y:49 として、直線が通っていない箇所を指定する。結果は false と描画される。

// 変数 result に x:50、y:49 が描画範囲内かの結果を代入
var result = c.isPointInPath(50, 49);

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3

正常に動作しなかった環境：
Opera 10.53
最初の期待値が true の場合も false と表示されてしまう。

W3C；
4.8.11 The canvas element — HTML 5

鳩山由紀夫と源義仲

ふと思った。鳩山由紀夫と源義仲は似ている。顔の造形は知らん。しかし状況やモデルがとてもよく似ている。

当時の京の人間は、支配していた平家（自民党）をうんざりだと思っていた。そこへ源義仲（鳩）が戦に勝ち（衆院選圧勝）、京に君臨することになった。
しかし義仲（鳩）の軍（民主党員）は盗賊（社会党）の残党であったりコソ泥（政治経験ゼロ党員）も含まれる烏合の衆であり、そもそも義仲（鳩）は軍（民主党員）の統率をできるようなタマではなく、狼藉（献金違反等）が絶えず起こり続けた。
さらにブレーンであった源行家（汚沢）は他勢力（中国や朝鮮）の顔色ばかりを伺い、民のことなどそっちのけ。
遂には後白河上皇を幽閉（陛下を政治利用）しようとし、結局は瓦解した。
そして、京の人々に残ったのはなにか。人間不信（政治不信）である。

歴史は繰り返すのだなと思った。

Illustrator のような二次ベジェ曲線で角丸の四角や微妙な円を描く(quadraticCurveTo) [html5 の Canvas を使ってみる：第卅七回]

bezierCurveTo(); では、三次ベジェ曲線を描いてみたが、次に quadraticCurveTo(); で二次ベジェ曲線を描いてみる。

★html 側

<canvas id="quadraticCurveTo"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: quadraticCurveTo で 2 次元描画を行うことの定義
  var c = document.getElementById("quadraticCurveTo").getContext('2d');

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:100 に定義
  c.moveTo(0, 100);
// x:50、y:20 を座標とするアンカーポイントを持つ、
// x:100、y:100 までの二次ベジェ曲線を描画
  c.quadraticCurveTo(50, 20, 100, 100);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。上記で指定したアンカーポイントの座標に向かう赤い補助線も引いてみた。


次に、左のアンカーポイントの先っちょを x:30 にずらしてみたらどうなるかやってみた。

c.quadraticCurveTo(30, 20, 100, 100);

さらに、同じく左のアンカーポイントの先っちょを y:150 にずらしてみたらどうなるか。

c.quadraticCurveTo(50, 150, 100, 100);

さて、角丸の四角をこの quadraticCurveTo(); を使って描ける。幅も高さも 100px の正方形の角を 10px 分丸めるとすると、角を quadraticCurveTo(); で描画するので、直線部分である 80px 分を lineTo(); で描画することになる。

// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:10、y:0 に定義
c.moveTo(10, 0);
// lineTo(); で x:90、y:0 へ直線を描画
c.lineTo(90, 0);
// x:100、y:0 を座標とするアンカーポイントを持つ、
// x:100、y:10 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 0, 100, 10);
// lineTo(); で x:100、y:90 へ直線を描画
c.lineTo(100, 90);
// x:100、y:100 を座標とするアンカーポイントを持つ、
// x:90、y:100 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 100, 90, 100);
// lineTo(); で x:10、y:100 へ直線を描画
c.lineTo(10, 100);
// x:0、y:100 を座標とするアンカーポイントを持つ、
// x:0、y:90 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 100, 0, 90);
// lineTo(); で x:0、y:10 へ直線を描画
c.lineTo(0, 10);
// x:0、y:0 を座標とするアンカーポイントを持つ、
// x:10、y:0 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 0, 10, 0);
// これらの座標に対して線を引く指令
c.stroke();

最後に、quadraticCurveTo(); を 4 回使って、微妙な円を描いてみる。

// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:50、y:0 に定義
c.moveTo(50, 0);
// x:100、y:0 を座標とするアンカーポイントを持つ、
// x:100、y:50 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 0, 100, 50);
// x:100、y:100 を座標とするアンカーポイントを持つ、
// x:50、y:100 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 100, 50, 100);
// x:0、y:100 を座標とするアンカーポイントを持つ、
// x:0、y:50 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 100, 0, 50);
// x:0、y:0 を座標とするアンカーポイントを持つ、
// x:50、y:0 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 0, 50, 0);
// これらの座標に対して線を引く指令
c.stroke();

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5