HTML5中非常夯的應用之一，就是canvas這個東東，他可以做出許多很炫的視覺效果，也就是為什麼HTML5在將來可以逐漸取代flash的原因之一，廢話不多說，我們直接來實作，其實非常簡單...
假設我們有一個遊戲網站(game)，然後我們要來利用canvas做出一個網站開頭畫面：
一、先建立好網頁的基本架構
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html{
height:100%;
overflow:hidden;
}
body{
margin:0px;
padding:0px;
height:100%;
}
</style>
</head>
<body>
</body>
</html>
二、然後在body放入我們主要的程式碼
<canvas id="gameCanvas" width="100" height="100">
Your browser doesn't include support for the canvas tag.
</canvas>
說明：對，你沒看錯，canvas的html碼就只有這樣，這邊的寬跟高只是虛設的，真正的寬高我們會用js去控制。
三、接下來是js程式碼的部份，建議放在body的最後，就是</body>的上方
<script>
window.onload = function(){
var canvas = document.getElementById('gameCanvas');
//將我們的canvas寬高設定成使用者螢幕的寬高，以填滿使用者螢幕
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
//這邊開始使用到一些canvas的api
//首先是利用getContext('2d')建立一個2D的繪畫內容
var c = canvas.getContext('2d');
//createLinearGradient()可以做出漸層的效果
var grd = c.createLinearGradient(0, canvas.height, canvas.width, 0);
grd.addColorStop(0, '#ceefff');
grd.addColorStop(1, '#52bcff');
//fillStyle的功能是填滿
c.fillStyle = grd;
//fillRect的功能是指定矩型的填滿範圍
c.fillRect(0, 0, canvas.width, canvas.height);
//接下來可以在canvas上寫字或放圖，我們選用放圖，所以寫字的部份我註解掉
//寫字
// var phrase = "Click or tap the screen to start the gameCanvas";
// c.font = 'bold 16px Arial, sans-serif';
// c.fillStyle = '#FFFFFF';
// c.fillText (phrase, 10, 30);
//放圖
var img = new Image();
img.src = "logo.png";
//一般放圖位置 座標0,0
// img.onload = function(){
// c.drawImage(img,0,0,img.width,img.height);
// }
//置中放圖位置
img.onload = function(){
c.drawImage(img,(canvas.width/2)-(img.width/2),(canvas.height/2)-(img.height/2),img.width,img.height);
}
}
</script>
No comments:
Post a Comment