首先是html5中canvas的是如何布置的，和一般的html标签一样canvas也是html中的一个标签，也可以通过js像操作dom树上的元素一样来操作canvas，如下定义canvas标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="canvas">浏览器不支持html5<canvas> 9 </body> 10 </html>
我们也可以给canvas添加style属性，添加canvas的宽和高，canvas就好像一快画布，我们可以用css向操作div一样来操作这块画布的起始状态，只有先确定canvas画布的状态，才可以用js在这块画布上创作画作。
1 <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa;display:block;margin: auto;">
这样我们就准备好了一张长宽都为400的画布。
现在canvas标签已经定义好了，我们该怎么来在这张空白的纸上画上需要的图形呢？
我们都知道画家要画出一幅美丽的图画，我们不管这位画家的画工有多好，彩笔有多么的丰富，画布有多么的好。至少这位画家要拿到这个画布（要把画布放到面前）才可以在上面作画。
canvas也一样，我们需要利用js拿到这块画布，才能绘制图形，js如下定义
1 var canvas=document.getElementById("canvas");
我们前面说过，canvas的js操作，和对普通的标签操作一样，我们也需要用document拿到canvas标签的控制权
我们拿到canvas之后呢，我们拿到画布当然是对画布进行绘制了。canvas有2d和3d画布的区别我们要在这边先定义下，我们把canvas表示为2d画布（我们讲的就是2维空间的绘制，以后有空会讲一讲3d的 部分）
1 var context=canvas.getContext(‘2d‘);
利用这段代码我们就可定义一个二维的画布了，现在我们就在这个二维画布context上进行创作了。
我们下边来绘制一个五角星： 下面就是完整的绘制五角星的代码。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <canvas id="canvas" style="display:block;margin: auto;"></canvas>
9 </body>
10
11
12 <script>
13 var WINDOW_WIDTH=1024; //画布宽度
14 var WINDOW_HEIGHT=568; //画布高度
15 window.onload=function(){
16 var canvas=document.getElementById("canvas");
17 canvas.width=WINDOW_WIDTH;
18 canvas.height=WINDOW_HEIGHT;
19 var context=canvas.getContext(‘2d‘);
20 drawStar(context,400,300,150,300,0)
21
22
23
24
25 }
26 function drawStar(cxt,x,y,r,R,ret){ //绘制五角星,偏移量x，y。大小圆半径r,R.旋转角度，正的表示顺时针，负的表示逆时针
27 cxt.beginPath();
28 for(var i=0;i<5;i++){
29 cxt.lineTo(Math.cos((18+72*i)/180*Math.PI+ret)*R+x,
30 -Math.sin((18+72*i)/180*Math.PI+ret)*R+y); //绘制大圆上的点
31 cxt.lineTo(Math.cos((54+72*i)/180*Math.PI+ret)*r+x,
32 -Math.sin((54+72*i)/180*Math.PI+ret)*r+y); //绘制小圆上的点
33 }
34 cxt.closePath();
35 cxt.stroke();
36 }
37 </script>
38 </html>
今天这部分主要是对canvas的基础的了解，下一节，我来讲下直线，多边形的绘制。
时间： 2024-07-30 03:10:58