HTML5 Canvas 初探

仅仅只是一个简单的hello world.

 

js代码很简单:

 

  1. <!DOCTYPE HTML>  
  2. <html lang="cn">  
  3.  <head>  
  4.   <title> canvas1 </title>  
  5.   <meta charset="UTF-8">  
  1.   //@author 杨虹昌  
  2.   <script type="text/javascript">  
  3.   //测试浏览器是否支持canvas  
  4.   function canvasSupport(){  
  5.     return   !!document.createElement('canvas').getContext;  
  6.   }  
  7.   
  8.  //添加window事件,文档加载完成之后执行此函数  
  9.   window.addEventListener('load',eventWindowLoaded,false);  
  10.   
  11.   //输出日志信息对象简单封装  
  12.   var Debugger=function(){};  
  13.   Debugger.log=function(message){  
  14.     try{  
  15.        console.log(message);  
  16.     }catch(e){  
  17.      return;      
  18.     }  
  19.   }  
  20.     
  21.   //窗体加载后执行函数  
  22.   function eventWindowLoaded(){  
  23.      canvasApp();  
  24.   }  
  25.   
  26.   //  
  27.   function canvasApp(){  
  28.      if(!canvasSupport()){  
  29.         return;  
  30.      }  
  31.     //获取html元素id为theCanvas的画布元素  
  32.      var theCanvas=document.getElementById('theCanvas');  
  33.      //获得2D上下文,注意:此处2d只能是小写,大写则为undefined,很郁闷为何不做静态常量,也许是我不知道吧  
  34.      var context=theCanvas.getContext('2d');  
  35.      //输出信息  
  36.      Debugger.log('Drawing Canvas');  
  37.   
  38.      //画对应类容  
  39.      function drawScreen(){  
  40.             //background  设置背景颜色   
  41.             context.fillStyle="#ffffaa";  
  42.             context.fillRect(0,0,500,300);  
  43.               
  44.             //font     设置字体  
  45.             context.fillStyle="#000000";  
  46.             context.font="20px_sans";  
  47.             context.textBaseline="top";  
  48.             context.fillText("Hello World",195,80);  
  49.   
  50.             //image   加载一张图片并输出到画布  
  51.             var helloWorldImage=new Image();  
  52.             helloWorldImage.src="http://avatar.csdn.net/0/E/9/1_yhc13429826359.jpg";  
  53.             helloWorldImage.onload=function(){  
  54.                context.drawImage(helloWorldImage,160,130);  
  55.             };  
  56.               
  57.             //border 边框设置  
  58.             context.strokeStyle="#000000";  
  59.             context.strokeRect(5,5,490,290);  
  60.      }  
  61.   
  62.      drawScreen();  
  63.   
  64.   }  
  65.   
  66.   </script>  
  67.  </head>  
  68.   
  69.  <body>  
  70.      <div style="position:absolute;top:50px;left:50px;">  
  71.      <canvas id="theCanvas" width="500" height="500">  
  72.        浏览器不支持html5 canvas,建议使用chrome,FF  
  73.      </canvas>  
  74.  </body>  
  75. </html>  

最终效果图:

 

只是一个最简单的例子,后续会详细解释.

posted @ 2013-10-28 09:28  web8  阅读(777)  评论(0)  编辑  收藏  举报