zoukankan      html  css  js  c++  java

  • 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>  

    最终效果图:

    只是一个最简单的例子,后续会详细解释.
  • 相关阅读:
    android 控件: xml 设置 Button 按下背景
    Hadoop: the definitive guide 第三版 拾遗 第四章
    二进制日志占满空间
    Unity3d学习笔记记录
    百度地图api---实现新建地图
    php简单浏览目录内容
    CRC校验的实现
    Android记录3--ExpandableListView使用+获取SIM卡状态信息
    Zookeeper Api(java)入门与应用(转)
    ZooKeeper程序员指南(转)
  • 原文地址：https://www.cnblogs.com/web100/p/HTML5-Canvas.html
Copyright © 2011-2022 走看看