Created
June 11, 2016 05:57
-
-
Save Restoration/56ddde05ef63f281e1696f1369cdb902 to your computer and use it in GitHub Desktop.
キャンバスのメモ
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Canvas</title> | |
| </head> | |
| <body> | |
| <script> | |
| onload = function(){ | |
| var canvas = document.getElementById('canvas'); | |
| var context = canvas.getContext('2d'); | |
| //イメージオブジェクの作成 | |
| var img = new Image(); | |
| img.src = 'img/image';//画像までのパス | |
| //画像を読み込み後実行 | |
| img.onload = function(){ | |
| /* | |
| slice_x スライスするx軸の距離 | |
| slice_y スライスするy軸の距離 | |
| slice_w スライスする画像の横幅 | |
| slice_h スライスする画像の高さ | |
| x 画像を表示するx軸の位置 | |
| y 画像を表示するy軸の位置 | |
| width 表示する画像の横幅 | |
| height 表示する画像の縦幅 | |
| */ | |
| //描画処理 | |
| //drawImage(x,y,width,height); | |
| context.drawImage(50,50,500,500); | |
| //トリミング処理 | |
| //drawImage(slice_x,slice_y,slice_w,slice_h,x,y,width,height); | |
| //context.drawImage(img,300,70,500,500,50,50,500,500); | |
| } | |
| } | |
| </script> | |
| <canvas id="canvas" width="500" height="500"></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment