HTML5使用canvas畫圖在定義canvas的標簽的時候，一般是要確定它的高和寬的。不過切記不要定義到樣式裡面去......否則，裡面所畫的圖片會自動放大或者縮小。
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>JavaScript Platformer 1</title>
- <style type="text/css">
- #Map{
- border:1px solid #000;
- width:1000px;
- height:600px;
- }
- </style>
- </head>
- <body>
- <canvas id="Map" >Your browser does not support the canvas element.</canvas>
- </body>
具體畫圖的JS就不貼了，就是用的drawImage( image , x , y )這個函數而已。悲劇的結果
修改之後的HTML
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>JavaScript Platformer 1</title>
- <style type="text/css">
- #Map{border:1px solid #000; }
- </style>
- </head>
- <body>
- <canvas id="Map" width="1000" height="600">Your browser does not support the canvas element.</canvas> 時，圖片被自動放大模糊的問題.....
