HTML5 Canvas 初探
2024-12-17 19:44:39 来源: 阅读:
仅仅只是一个简单的hello world.
js代码很简单:
- <!DOCTYPE HTML>
- <html lang="cn">
- <head>
- <title> canvas1 </title>
- <meta charset="UTF-8">
-
- <script type="text/javascript">
-
- function canvasSupport(){
- return !!document.createElement('canvas').getContext;
- }
-
-
- window.addEventListener('load',eventWindowLoaded,false);
-
-
- var Debugger=function(){};
- Debugger.log=function(message){
- try{
- console.log(message);
- }catch(e){
- return;
- }
- }
-
-
- function eventWindowLoaded(){
- canvasApp();
- }
-
-
- function canvasApp(){
- if(!canvasSupport()){
- return;
- }
-
- var theCanvas=document.getElementById('theCanvas');
-
- var context=theCanvas.getContext('2d');
-
- Debugger.log('Drawing Canvas');
-
-
- function drawScreen(){
-
- context.fillStyle="#ffffaa";
- context.fillRect(0,0,500,300);
-
-
- context.fillStyle="#000000";
- context.font="20px_sans";
- context.textBaseline="top";
- context.fillText("Hello World",195,80);
-
-
- var helloWorldImage=new Image();
- helloWorldImage.src="http://avatar.csdn.net/0/E/9/1_yhc13429826359.jpg";
- helloWorldImage.onload=function(){
- context.drawImage(helloWorldImage,160,130);
- };
-
-
- context.strokeStyle="#000000";
- context.strokeRect(5,5,490,290);
- }
-
- drawScreen();
-
- }
-
- </script>
- </head>
-
- <body>
- <div style="position:absolute;top:50px;left:50px;">
- <canvas id="theCanvas" width="500" height="500">
- 浏览器不支持html5 canvas,建议使用chrome,FF
- </canvas>
- </body>
- </html>
最终效果图:
只是一个最简单的例子,后续会详细解释.