■ はじめに
* Canvas を使って、画像に線を引いてみる。 => 結構、簡単にできる!!
■ サンプル
例１：画像にラインを引く
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <h1>Demo for canvas</h1> <canvas id="sample" width="1000" height="1000"></canvas> <script> function draw(targetId, targetImage, lineColor, lineWidth, lineCoordinates){ var targetElement = document.querySelector(targetId); // canvas に描画するための API にアクセスできるオブジェクトを取得 // 二次元なら"2d"、三次元なら"webgl"(WebGL)を指定 var context = targetElement.getContext("2d"); var image = new Image(); image.src = targetImage; image.onload = function(){ // 画像を表示 context.drawImage(image, 0, 0, 500, 500); context.strokeStyle = lineColor; context.lineWidth = lineWidth; // 線を描画 context.beginPath(); // beginPath() : 現在のパスをリセット context.moveTo(lineCoordinates[0][0], lineCoordinates[0][1]); // moveTo() : 開始点を座標指定 for (var i = 1; i < lineCoordinates.length; i++) { context.lineTo(lineCoordinates[i][0], lineCoordinates[i][1]); // lineTo() : 直前の座標と指定座標を結ぶ直線を引く } context.stroke(); // stroke() : 現在のパスを輪郭表示 } } document.body.onload = function(){ draw("#sample", "img/sample.jpg", "#fff", "3", new Array(["0", "0"], ["200", "200"], ["200", "400"], ["500", "400"])); } </script> </body> </html>
例２：画像を回転させる
回転だけだと残像が残るので残像消す処理も入れる<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <h1>Demo for canvas</h1> <canvas id="sample" width="1000" height="1000"></canvas> <br /> <button onclick="rotate()">Rotate</button> <script type="text/javascript"> var canvas = document.getElementById('sample'); var context = canvas.getContext('2d'); var image = new Image(); image.crossOrigin = ""; image.src = "https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg"; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); } var angle = 0; function rotate() { // 残像を消す context.clearRect(0, 0, canvas.width, canvas.height); angle += 5; context.translate(canvas.width/2, canvas.height/2); context.rotate(angle * Math.PI / 180); context.drawImage(image, -canvas.width/2, -canvas.height/2, canvas.width, canvas.height); context.rotate(-angle * Math.PI / 180); context.translate(-canvas.width/2, -canvas.height/2); return; } </script> </body> </html>
例３：画像を拡大・縮小する
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <h1>Demo for canvas</h1> <canvas id="sample" width="1000" height="1000"></canvas> <br /> <div> <span>縮小</span> <input id="zoom-slider" type="range" value="1" min="0.01" max="2" step="0.01"> <span>拡大</span> </div> <script type="text/javascript"> var canvas = document.getElementById('sample'); var context = canvas.getContext('2d'); var image = new Image(); image.crossOrigin = ""; image.src = "https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg"; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); } var slider = document.getElementById('zoom-slider'); slider.addEventListener('input', event => { // 一旦クリア context.clearRect(0, 0, canvas.width, canvas.height); // 倍率変更 var scale = event.target.value; context.scale(scale, scale); // 再描画 context.drawImage(image, 0, 0); // 変換マトリクスを元に戻す context.scale(1 / scale, 1 / scale); }); </script> </body> </html>スワイプ / マウスホイール による拡大縮小は、以下の関連記事を参照のこと
https://blogs.yahoo.co.jp/dk521123/37819850.html
参考文献
Canvashttp://www.html5.jp/canvas/what.html
画像に線を引く
http://computer-technology.hateblo.jp/entry/20131030/p1
画像を回転させる
http://kiwasalog.com/caprice/js-canvas-rotate.html
画像を拡大・縮小する
https://kuroeveryday.blogspot.com/2017/09/zoom-in-out-and-drag-to-move-on-canvas.html
https://javascript.step-learn.com/contents/J147-canvas-scale.html
