canvasは以下のような形で書いていくことが出来る。
canvasの各属性は、
こちらのサイトに格好よく載っているので、
参考にしたい。
<html>
<head>
<script type="text/javascript">
<!--
// ページが読み込まれたときにこの関数を呼び出します
function test() {
var canvas = document.getElementById("sample"); //canvasタグを取得
/*canvasに対応しているか調べる*/
if (canvas && canvas.getContext ) {
var context = canvas.getContext("2d"); //<-2次元描画するときは2d
gradient_test(context); //グラディエーションのやり方を説明するための関数
string_test(context); //文字表示のやり方を説明するための関数
line_test(context); //線の引き方を説明するための関数
} else {
alert('canvasをサポートしたブラウザが必要です');
}
}
//グラディエーションを実現する関数
function gradient_test(context) {
var gradient = context.createLinearGradient(0,0,0,500); //始点x座標,始点y座標、終点x座標
gradient.addColorStop(0,"rgb(0,0,255)"); //第一引数0はgradientを開始点の色
gradient.addColorStop(0.5,"rgb(0,255,0)"); //第一引数0.5は0と1の間
gradient.addColorStop(1,"rgb(255,0,0)"); //第一引数1はgradientを終了点の色
context.fillStyle = gradient; //gradientを塗り色に指定
context.fillRect(0,0,500,500); //色塗り指定。context.rect(0,0,500,500); context.fill();としても同じような意味となる。
}
//文字を表示する関数
function string_test(context) {
context.font = "18px 'ＭＳ Ｐゴシック'";
context.fillStyle="red"; //<-fillstyleは"rgb(x,y,z);"としても良いし、このように色を指定してもOK
context.fillText("文字を表示する",25,25); /*<-このx,y座標の数値を大きくすると、
デフォルトキャンパスサイズを超えて何も表示されない？と勘違いすることがある。
<canvas id="sample" width="500" height="500"></canvas>等のように
指定しておくのも一つの手。*/
}
//線を引く関数
function line_test(context) {
context.lineWidth = 10;
context.strokeStyle = '#FFFA54';
context.lineWidth
context.beginPath();
context.moveTo(100,100);
context.lineTo(200,300);
context.stroke();
}
//canvasの値をjpeg形式等で取り出す
function canvas_to_dataURL() {
var canvas = document.getElementById("sample"); //canvasタグを取得
var img = canvas.toDataURL("image/jpeg");
}
//-->
</script>
</head>
<body onload ="test();">
<canvas id="sample">
</canvas>
</body>
</html>
最終更新：2015年03月30日 00:13
