點評：大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見得支持html5所有的新特性,建議大家使用firefox（開發者的最愛）或者是chrome瀏覽器，我所有的例子都是基于firefox開發的
從今天開始，我們將開始一個關于html5 canvas的系列課程。這個系列是我讀《HTML5 Canvas：Native Interactivity and Animation for the Web》后的總結，有興趣的朋友可以去下載英文原版書籍閱讀。這本書通過介紹canvas游戲開發的方式，向我們展現canvas強大的功能，我覺得相當不錯，通過閱讀這本書我學到了canvas很多的知識。其實canvas本身的api并不多，關鍵是活學活用，學會對api的組合使用制作出令人難以置信的效果。而這本書就是你學習canvas最好的選擇，只可惜他暫時還沒有中文版，英文不好的朋友只有再等等了。復制代碼
代碼如下:
<canvas>
Your browser does not support HTML5 Canvas.
</canvas>
復制代碼
代碼如下:
if (!theCanvas || !theCanvas.getContext) {
return;
}
復制代碼
代碼如下:
function canvasSupport () {
return Modernizr.canvas;
}
復制代碼
代碼如下:
//設置區域顏色
context.fillStyle = "#ffffaa";
//繪制區域
context.fillRect(0, 0, 500, 300);
//設置字體
context.font = "20px _sans";
//設置垂直對齊方式
context.textBaseline = "top";
//繪制文字
context.fillText ("Hello World!", 195, 80);
//設置邊框顏色
context.strokeStyle = "#000000";
//繪制邊框
context.strokeRect(5, 5, 490, 290);
復制代碼
代碼如下:
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
新聞熱點
疑難解答
