HTML5 Canvas 初吻


html5

html5是當前最新的html(HyperText Markup Language)版本,

在1993年,html被標准化也是推動www發展的重要因素, html是一種使用標簽(<>)定義web頁面內容的方式。

 

html5 canvas

簡單的理解,<canvas>是一個新的HTML元素(標簽),我們可以在<canvas></canvas>定義區域, 該區域可理解成一個畫布; 利用canvas api在這個畫布上進行繪圖;

是可用javascript操作直接在屏幕可繪圖區域繪圖;

canvas直接通過屏幕像素渲染;

可以javascript與canvas api 重繪可繪圖屏幕的每一幀;

作為一個programmer,只需要確保用正確的像素渲染每一幀圖像,並顯示出來即可;

 

canvas api

包括一個2D環境,2D環境是一個顯示api,用於在一個可繪圖區域渲染圖像;

允許programmer繪各種形狀、文本、直接顯示圖片;

可以控制顏色、旋轉、透明度、像素操作;以及各種直線、曲線、盒子等;

但在2D環境下,用這個技術創建應用程序,是非常little,只需添加兼容javascript跨瀏覽器的功能,支持鍵盤、鼠標、時間、事件、對象、聲音等;

我們可以通過學習html5 canvas,創建驚人的動畫、應用程序及游戲(基本上取代了flash等);

 

DOM and Canvas

DOM= Document Object Model, 表示和處理一個html頁面;

 一種獨立於平台和語言,可在瀏覽器中訪問和修改一個文檔的內容和結構;

為了可以用javascript來操作canvas,在html5頁面中,用DOM來定位<canvas>標簽;

canvas元素本身是可以在瀏覽器中通過 DOM來訪問的,但在畫布上創建的單個圖形元素是在DOM中訪問 這是因為畫布在實時模式下工作,沒有自己的對象;

"window"對象是最頂級的DOM對象、我們需要測試該對象,以確保我們啟動canvas應用程序之前,所有的代碼已加載;

 "document"對象包含一個html頁面的所有html標簽。我們將需要它來查找到要用javascript操作的canvas實例;

 

JavaScript and Canvas

我們可以用javascript來創建canvas 應用程序,可以運行在現有的任何瀏覽器上;

 

hello world 例子[IE9中通過測試]

View Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your First Canvas Application </title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">

//modernizr-1.6.min.js 是一個支持canvas的類庫,大家自己下載一下

//監聽頁面加載事件
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {canvasApp();}

//檢查是否支持
canvasfunction canvasSupport ()
{
return Modernizr.canvas;}

//canvas 程序
function canvasApp ()
{
if (!canvasSupport()) {return;}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");

//繪圖主程序
function drawScreen()
{
//background
context.fillStyle = "#ffffaa";
context.fillRect(
0, 0, 500, 300);
//text
context.fillStyle = "#000000";
context.font
= "20px _sans";
context.textBaseline
= "top";
context.fillText (
"Hello World!", 195, 80 );
//box
context.strokeStyle = "#000000";
context.strokeRect(
5, 5, 490, 290);}
//調用繪圖
drawScreen();
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">Your browser does not support HTML5 Canvas.</canvas>
</div>
</body>
</html>

 


願喜歡我的人、不喜歡我的人都得到幸福!

南無阿彌陀佛!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM