首页 > 网页设计 > HTML5 Canvas 初探

HTML5 Canvas 初探

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

 

js代码很简单:

 

[javascript][/javascript] view plaincopy

  1. <!DOCTYPE HTML>
  2. <html lang="cn">
  3.  <head>
  4.   <title> canvas1 </title>
  5.   <meta charset="UTF-8">
[javascript][/javascript] view plaincopy

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

最终效果图:

 

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


本文固定链接: http://www.devba.com/index.php/archives/3254.html | 开发吧

报歉!评论已关闭.