HTML5のcanvas要素 - イメージを描く
イメージ描くをメソッド
- void drawImage(Image image, float x, float y) : x,y位置にそのまま表示する
- void drawImage(Image image, float x, float y, float width, float height) : x,y位置に伸縮して表示する
- void drawImage(Image image, integer sx, integer sy, integer sw, integer sh, float dx, float dy, float dw, float dh) : イメージの一部を取得し、伸縮して表示する
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> イメージを描く </title> </head> <body> <h2> イメージを描く </h2> <canvas id="canvas" width="420" height="280" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canvas = document.getElementById('canvas'); // CanvasRenderingContext2D取得 var ctx = canvas.getContext('2d'); // Image生成 var image = new Image(); // Imageの位置 image.src = "logo.jpg"; // webリソースの場合、大容量イメージで読み込みに時間がかかる場合 // イメージの読み込み後に表示するために、onloadイベントで描く image.onload = function() { // イメージを描く ctx.drawImage(image, 20, 10); // 一部のイメージを描く ctx.drawImage(image, 180, 10, 76, 110); var sd = 50; var sh = 65 // 一部を取得し、3倍に拡大して表示する ctx.drawImage(image, 2, 50, sd, sh , 265, 10, sd * 3, sh * 3); } </script> </body> </html>