学习Canvas绘图与动画基础 canvas入门（一）

一、创建canvas

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4    <meta charset="UTF-8">
 5    <title></title>
 6 </head>
 7 
 8 <body>
 9    <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa; display:block;margin:30px auto;"></canvas>
10    <!--
11 说明：
12    1.不建议使用css给canvas设置width和height,因为canvas不仅有画布显示的大小，还包括它内里的显示的图画的分辨率的大小
13    2.注意width和height不加单位px
14    -->
15 </body>
16 </html>

一般有两部分组成：HTML和Javascript

HTML

<canvas id="canvas"></canvas>

Javascript

1    var canvas=document.getElementByid('canvas');
2    var context=canvas.getContext('2d');
3    //使用context进行绘制

举例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4    <meta charset="UTF-8">
 5    <title></title>
 6 </head>
 7 
 8 <body>
 9    <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
10      当前浏览器不支持Canvas,请更换浏览器
11    </canvas>
12    <script>
13       var canvas=document.getElementById('canvas');  
14       canvas.width=1024;
15       canvas.height=768;//也可以在这里设置width和height
16       var context=canvas.getContext('2d');
17       //使用context进行绘制
18    </script>
19    <!--
20      说明：
21      1.要考虑浏览器的兼容问题，在canvas标签中进行提示，当浏览器支持canvas时，里面的文字会被忽略的
22      2.对浏览器兼容的判断也可在js中进行。判断在下面代码块中进行展示
23      -->
24 </body>
25 </html>

用js提示兼容性

 1 <script>
 2       var canvas=document.getElementById('canvas');  
 3       canvas.width=1024;
 4       canvas.height=768;//也可以在这里设置width和height
 5       
 6       if(canvas.getContext("2d")){
 7         var context=canvas.getContext('2d');
 8         //使用context进行绘制
 9       }else{
10          alert('当前浏览器不支持Canvas,请更换浏览器后再试')
11       }
12 </script>

 

posted @ 2015-12-17 15:18  dreamflower  阅读(396)  评论(0)  编辑  收藏  举报