這篇是canvas初步實做，前文介紹詳見HTML5新嘗試 -- canvas標籤(1)
在下面，我將用<!DOCTYPE>宣告一個HTML5網頁，裡面包含簡單的html, head, body標籤，head中import進HTML5的框架之一modernizr-1.6.min.js檔案(按此下載)，這是必須的，並且在body中放入一個簡單的canvas標籤。然而為免沒有支援HTML5 canvas的瀏覽器(例如你猜的到的：IE5前後版本)會看到一無所有的網頁造成使用者有困惑，在canvas標籤之間放入一串文字"Your browser cannot support the canvas!"。
是啊，雖然我們不能控制瀏覽器版本，但我們可以控制網頁使用者XD
<!DOCTYPE html>
<html lang = "zh-TW">
<head>
<meta charset = "BIG5">
<title></title>
<script src = "modernizr-1.6.min.js"></script>
<style>
#c1{width:500px; height:300px; border:solid 1px red;}
div{position:absolute; top:50px; left:50px; border:solid 1px green;}
</style>
</head>
<body>
<div>
<canvas id="c1">Your browser cannot support the canvas!</canvas>
</div>
</body>
</html>
在此我只放入了簡單的css樣式來凸顯我們現在的canvas圖紙範圍，待會的javascript畫圖動作都只能在其中完成。
 |
| 紅框中為圖紙範圍 |
準備好了，現在我把畫圖的動作放進另一個hi.js檔中import進入我們的網頁。
<!DOCTYPE html>
<html lang = "zh-TW">
<head>
<meta charset = "BIG5">
<title></title>
<script src = "modernizr-1.6.min.js"></script>
//加入下面這一行，import我自己寫的javascript檔"hi.js"
<script src = "hi.js"></script>
<style>
#c1{width:500px; height:300px; border:solid 1px red;}
div{position:absolute; top:50px; left:50px; border:solid 1px green;}
</style>
</head>
<body>
<div>
<canvas id="c1">Your browser cannot support the canvas!</canvas>
</div>
</body>
</html>
而我的hi.js中寫了下面的內容
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function(){};
Debugger.log = function(message){
try{
console.log(message);
}catch(exception){
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
if(!canvasSupport()){
return;
}
var theCanvas = document.getElementById("c1");
var context = theCanvas.getContext("2d");
Debugger.log("Drawing Canvas");
function drawScreen(){
context.fillStyle = "#ffffaa";
context.fillRect (0, 0, 500, 300);
context.fillStyle = "#000000";
context.font = "20px_sans";
context.textBaseline = "top";
context.fillText("hello, world", 195, 80);
context.strokeStyle = "#000000";
context.strokeRect (5, 5, 490, 290);
}
drawScreen();
}
現在來看看剛剛空白的網頁變成怎樣了。
 |
| 給了他一個hello, world的字(其實是圖)在那兒 |
Continue...
April 24th, 2012
shesee@Taipei
沒有留言:
張貼留言