ＪａｖａＳｃｒｉｐｔ/HTMLおぼえがき
描画（canvas）
図の描画 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvas図形の描画</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
body {}
-->
</style>
<script>
onload = function() { ini(); };
function ini() {
//1 長方形を塗りつぶす
var ctx1 = document.getElementById('c1').getContext('2d');
ctx1.fillStyle = 'blue';
ctx1.fillRect(10,10,90,90);
//2 長方形を描く
var ctx2 = document.getElementById('c2').getContext('2d');
ctx2.strokeRect(10,10,90,90);
//3 円を描く
var ctx3 = document.getElementById('c3').getContext('2d');
ctx3.arc(50,50,40, 0, Math.PI*2, false);
ctx3.stroke();
//4 円弧を描く
var ctx4 = document.getElementById('c4').getContext('2d');
ctx4.arc(50,50,40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx4.stroke();
//5 円弧を塗りつぶす
var ctx5 = document.getElementById('c5').getContext('2d');
ctx5.arc(50,50,40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx5.fill();
//6 パスを新たに作る
//6-1 パスを初期化
var ctx6 = document.getElementById('c6').getContext('2d');
ctx6.beginPath();
//6-2 一つめのサブパス
ctx6.moveTo(50, 10);
ctx6.lineTo(10, 90);
ctx6.lineTo(90,90);
ctx6.closePath();
//6-3 二つ目のサブパス
ctx6.moveTo(70, 10);
ctx6.lineTo(95, 50);
ctx6.lineTo(55, 50);
ctx6.closePath();
//6-4 これまで描いたパスを表示
ctx6.stroke();
//7 テキストの表示
var ctx7 = document.getElementById('c7').getContext('2d');
ctx7.strokeRect(0, 0, 100, 100);
ctx7.font = "11pt Arial";
ctx7.fillStyle = "red";
ctx7.fillText ("Sample String",5, 50);
ctx7.strokeStyle = "blue";
ctx7.strokeText("Sample String",5, 80);
//8 線を引く
var ctx8 = document.getElementById('c8').getContext('2d');
ctx8.beginPath();
//8-1 lineWidthの指定なしの例
ctx8.moveTo(10, 25);
ctx8.lineTo(90, 25);
ctx8.stroke();
//8-2 lineWidthを5にした例
ctx8.beginPath();
ctx8.lineWidth = 5;
ctx8.moveTo(10, 50);
ctx8.lineTo(90, 50);
ctx8.stroke();
//8-3 lineWidthを10にした例
ctx8.beginPath();
ctx8.lineWidth = 10;
ctx8.moveTo(10, 75);
ctx8.lineTo(90, 75);
ctx8.stroke();
//8-4 2次ベジェ曲線
var ctxa = document.getElementById('ca').getContext('2d');
ctxa.strokeStyle = 'red';
ctxa.lineWidth = 4;
ctxa.beginPath();
ctxa.moveTo(10, 10);
ctxa.quadraticCurveTo(90, 50, 10, 90);
ctxa.stroke();
//8-5 3次ベジェ曲線
var ctxb = document.getElementById('cb').getContext('2d');
ctxb.strokeStyle = 'red';
ctxb.lineWidth = 4;
ctxb.beginPath();
ctxb.moveTo(10, 50);
ctxb.bezierCurveTo(50, -50, 50, 150, 90, 50);
ctxb.stroke();
}
</script>
</head>
<body>
<canvas id=c1 width=100 height=100></canvas>
<canvas id=c2 width=100 height=100></canvas>
<canvas id=c3 width=100 height=100></canvas>
<canvas id=c4 width=100 height=100></canvas>
<canvas id=c5 width=100 height=100></canvas>
<canvas id=c6 width=100 height=100></canvas>
<canvas id=c7 width=100 height=100></canvas>
<canvas id=c8 width=100 height=100></canvas>
<canvas id=ca width=100 height=100></canvas>
<canvas id=cb width=100 height=100></canvas>
</body>
</html>
図形のグラデーション 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasグラデーション</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas3" width=200 height=200></canvas>
<script>
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");
//線形のグラデーション
var gra = context3.createLinearGradient(0, 0, 200,0); //開始点地点x,y,終了地点x,yを指定する。
//グラデーション終点のオフセット（０～１）と色の指定
gra.addColorStop(0.0, "rgb(255,0, 0)"); //0.0-赤
gra.addColorStop(0.5, "rgb(0, 255, 0)"); //0.5-緑
gra.addColorStop(1.0, "rgb(0, 0, 255)"); //1.0-青
context3.fillStyle = gra;
context3.fillRect(0, 0, 200, 200); //四角の描画
</script>
<canvas id="canvas4" width=200 height=200></canvas>
<script>
var canvas4 = document.getElementById("canvas4");
var context4 = canvas4.getContext("2d");
//円形のグラデーション
var gra2 = context4.createRadialGradient(80, 80, 0, 80,80, 150); //中心１座標x,y,半径r,中心２座標x,y,半径rを指定する
//グラデーション終点のオフセット（０～１）と色の指定
gra2.addColorStop(0.0, "rgb(255,0, 0)"); //0.0-赤
gra2.addColorStop(0.5, "rgb(0, 255, 0)"); //0.5-緑
gra2.addColorStop(1.0, "rgb(0, 0, 255)"); //1.0-青
context4.fillStyle = gra2;
context4.arc(100, 100, 100, 0, 2*Math.PI, true); //円形の描画
context4.fill();
</script>
<canvas id="canvas5" width=200 height=200></canvas>
<script>
var canvas5 = document.getElementById("canvas5");
var context5 = canvas5.getContext("2d");
//円形のグラデーション
var gra3 = context5.createRadialGradient(80, 80, 0, 50,50, 200);
gra3.addColorStop(0.0, "rgb(255,255,255)"); //0.0-白
gra3.addColorStop(1.0, "rgb(0, 0, 0)"); //1.0-黒
context5.fillStyle = gra3;
context5.arc(100, 100, 100, 0, 2*Math.PI, true); //円形の描画
context5.fill();
</script>
</body>
</html>
画像の描画 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvasイメージの描画</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas3" width=500 height=500></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas3");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
var w = image.width;
var h = image.height;
context.drawImage(image, 0, 0, w, h);
context.drawImage(image, w, h, w/2, h/2);
};
</script>
</body>
</html>
画像のクリッピング 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasイメージのクリップ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas1" width=200 height=200></canvas>
<canvas id="canvas2" width=200 height=200></canvas>
<script>
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
context2.beginPath();
context2.arc(100, 100, 100, 0, 2*Math.PI, true);//円形でクリップ
context2.clip();
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
context1.drawImage(image, 0, 0, canvas1.width, canvas1.height);//原画の描画
context2.drawImage(image, 0, 0, canvas2.width, canvas2.height);//クリップ描画
}
</script>
</body>
</html>
画像の回転・傾斜・縮尺設定 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvas画像の変形</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<p>元の画像</p>
<canvas id="canvas1" width=300 height=300></canvas>
<p>回転設定</p>
<canvas id="canvas2" width=300 height=300></canvas>
<p>傾斜設定</p>
<canvas id="canvas3" width=300 height=300></canvas>
<p>縮尺設定</p>
<canvas id="canvas4" width=300 height=300></canvas>
<script type="text/javascript">
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");
var canvas4 = document.getElementById("canvas4");
var context4 = canvas4.getContext("2d");
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
var sw = image.width;
var sh = image.height;
var cw = canvas1.width;
var ch = canvas1.height;
context1.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
context1.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画
context2.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
context2.rotate( Math.PI*45/180 ); //画像の回転（45度）
context2.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画
context3.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
context3.transform(1,-0.2,-0.2,1,0,0) ; //縦、横の傾斜指定（0.2）
context3.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画
context4.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
context4.transform(1.2,0,0,0.8,0,0) ; //尺度（拡大・縮小）指定（横1.2に拡大、縦0.8に縮小）
context4.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画
};
</script>
</body>
</html>
画像の加工（ピクセル操作） 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasピクセル処理</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<canvas id="canvas1" width=200 height=200></canvas>
<canvas id="canvas2" width=200 height=200></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);//原画を描画
var pixel = context.getImageData( 0, 0, canvas.width, canvas.height) ;
//白黒（RGBの要素の平均値をRGBの値にする。）
for(var y = 0; y < canvas.height; y++) {
for(var x = 0; x < canvas.width ; x++) {
r = pixel.data[(y * canvas.width + x) * 4 + 0] ;
g = pixel.data[(y * canvas.width + x) * 4 + 1] ;
b = pixel.data[(y * canvas.width + x) * 4 + 2] ;
a = (r + g + b)/3 ;
pixel.data[(y * canvas.width + x) * 4 + 0] = a ;
pixel.data[(y * canvas.width + x) * 4 + 1] = a ;
pixel.data[(y * canvas.width + x) * 4 + 2] = a ;
pixel.data[(y * canvas.width + x) * 4 + 3] = 255 ;
}
}
context1.putImageData(pixel,0,0) ;//白黒で描画
//セピア色（RGBそれぞれの要素をRｘ0.9,Gx0.7,Bx0.4で設定する。）
for(var y = 0; y < canvas.height; y++) {
for(var x = 0; x < canvas.width ; x++) {
r = pixel.data[(y * canvas.width + x) * 4 + 0] ;
g = pixel.data[(y * canvas.width + x) * 4 + 1] ;
b = pixel.data[(y * canvas.width + x) * 4 + 2] ;
pixel.data[(y * canvas.width + x) * 4 + 0] = r * 0.9 ;
pixel.data[(y * canvas.width + x) * 4 + 1] = g * 0.7 ;
pixel.data[(y * canvas.width + x) * 4 + 2] = b * 0.4 ;
pixel.data[(y * canvas.width + x) * 4 + 3] = 255 ;
}
}
context2.putImageData(pixel,0,0) ;//セピア色で描画
}
</script></body>
</html>
画像の保存 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasファイルへ保存</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<button onclick="saveData()">保存</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function saveData() {
var data = canvas.toDataURL("image/png");
data = data.replace("image/png", "image/octet-stream");
window.open(data, "save");
}
</script>
</body>
</html>
画像の保存（その２） 戻る
ブラウザの画像保存機能で保存できます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasファイルへ保存（その２）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<p><button onclick="dsp()">image表示</button><p>
<p>表示画像をマウス右クリックして保存する。</p>
<img id="output" src="">
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function dsp() {
// 描画内容をデータURIに変換する (引数なしはPNG)
var dataURI = canvas.toDataURL() ;
// JPGの場合 (第2引数は品質)
//var dataURI = canvas.toDataURL( "image/jpeg", 0.75 ) ;
// img要素を取得
var image = document.getElementById( "output" ) ;
image.src = dataURI ;
}
</script>
</body>
</html>
画像の表示 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasの画像表示</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<button onclick="display()">表示</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function display() {
var img = new Image() ;
img.src = canvas.toDataURL("image/png");
img.onload = function() { location.href = img.src ; }
}
</script>
</body>
</html>
画像の複写 戻る
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasの画像複写</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<div id="cp"></div>
<br><br>
<button onclick="copy()">複写</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function copy() {
var img = new Image() ;
img.src = canvas.toDataURL("image/png");
img.onload = function() {
var imgelm = document.createElement("img") ;
imgelm.src = img.src ;
document.getElementById("cp").appendChild(imgelm) ;
// document.getElementById("cp").innerHTML ="<img src = 'img.src'>" ;
}
}
</script>
</body>
</html>
Webカメラの動画をcanvasに表示 戻る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>video</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onload="ini()">
<div id="videoPreview" ><p>video preview</p></div>
<div id="canvasPreview"><p>canvas preview</p></div>
<button type="button" onclick="video.pause();">停止</button>
<button type="button" onclick="video.play() ;">開始</button>
<script>
function ini() {
// video要素をつくる
video = document.createElement('video');
video.id = 'video';
video.width = 400 ;
video.height = 400 ;
video.autoplay = true;
document.getElementById('videoPreview').appendChild(video);
// video要素にWebカメラの映像を表示させる
media = navigator.mediaDevices.getUserMedia({
audio: false,
video: {
width: { ideal: 400 },
height: { ideal: 400 }
}
}).then(function(stream) { video.srcObject = stream; } );
// canvas要素をつくる
canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = 400;
canvas.height = 400;
document.getElementById('canvasPreview').appendChild(canvas);
// コンテキストを取得する
canvasCtx = canvas.getContext('2d');
// video要素の映像をcanvasに描画する
_canvasUpdate();
function _canvasUpdate() {
canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(_canvasUpdate);
};
}
</script>
</body>
</html>