学习HTML5之塔克大战（详细记录）

浏览数：36 / 时间：2015年06月09日

学了一些HTML5的一些基本知识，开始学习制作......

介绍一些基本知识： px(像素)---》1px等于多少？ 1cm or 2cm -->no no no!

(1).像素是一个密度单位：无法用度量....

(2) stoke--->画线 fill--->填充

(3)再画图形时，一定记得路径闭合...

(4)在绘制图片时:需要注意的是：先加载图片，在进行绘制

绘制照片的一些基本步骤：

（1）创建image对象 new Image();

（2）指定图片（或者路径） src=" "

（3）先加载，再进行一段绘制 dirawImage();

代码详细的注释：

 1 <html>
 2     <head>
 3     
 4     </head>
 5     <body>
 6          <!--用canvas画布画一个矩形-->
 7          <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
 8      <script type="text/javascript">
 9              <!--得到画布-->
10              var canvas_1=document.getElementById("gxjun");
11          var cnt=canvas_1.getContext("2d");
12          //alert(cxt);
13          //moveto设置点位置
14          cnt.moveTo(20,20);
15          //有上面那个点为起点 设置第二个点位置
16          cnt.lineTo(20,90);
17          //将两个点连接起来
18          cnt.stroke();
19          //画出一个填充的三角形.-->路径
20          //开始新路径
21            cnt.beginPath();
22            cnt.moveTo(40,20);
23            cnt.lineTo(40,90);
24            cnt.lineTo(80,90);
25           //闭合路径，把最后这个点和第一点MoveTO()闭合
26            cnt.closePath();
27           //cnt.stroke();
28                //填充矩形 由于三角形闭合了，所以填充了三角形
29           //注意的一点是： 只有矩形才会不用路径闭合
30            cnt.fill();  
31            cnt.strokeRect(100,20,30,50);  //strokeRect(x,y,weidth,height);
32              //填充矩形 
33             cnt.fillStyle="#004DFF";   //填充颜色
34         cnt.fillRect(140,20,30,50); 
35         //画其他图形时一定的记得开始和闭合
36         cnt.beginPath();
37         //如何话圆形  arc函数
38         //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
39          cnt.fillStyle="#FF0000";
40         cnt.arc(220,40,20,0,360,false);                                                 cnt.closePath();
41         cnt.stroke();
42         cnt.fill();
43              //画图像
44                var img_1=new Image();
45            img_1.src="10.jpg";
46            //加载完毕后再绘图....
47            img_1.onload=function(){
48            //(object,x,y,weidth,height)
49              cnt.drawImage(img_1,20,100,155,220);         
50                 }       
51        </script>
52      </body>
53 </html>

效果图：

有关Javascript写字体：

代码：

 1 <html> 
 2    <head》</head>
 3     <body>
 4          <!--用canvas画布画一个矩形-->
 5          <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas>
 6      <script type="text/javascript">
 7              <!--得到画布-->
 8              var canvas_1=document.getElementById("gxjun");
 9          var cnt=canvas_1.getContext("2d");
10          //alert(cxt);
11          //moveto设置点位置
12          cnt.moveTo(20,20);
13          //有上面那个点为起点 设置第二个点位置
14          cnt.lineTo(20,90);
15          //将两个点连接起来
16          cnt.stroke();
17          //画出一个填充的三角形.-->路径
18          //开始新路径
19            cnt.beginPath();
20            cnt.moveTo(40,20);
21            cnt.lineTo(40,90);
22            cnt.lineTo(80,90);
23           //闭合路径，把最后这个点和第一点MoveTO()闭合
24            cnt.closePath();
25           //cnt.stroke();
26                //填充矩形 由于三角形闭合了，所以填充了三角形
27           //注意的一点是： 只有矩形才会不用路径闭合
28            cnt.fill();  
29            cnt.strokeRect(100,20,30,50);  //strokeRect(x,y,weidth,height);
30              //填充矩形 
31             cnt.fillStyle="#004DFF";   //填充颜色
32         cnt.fillRect(140,20,30,50); 
33         //画其他图形时一定的记得开始和闭合
34         cnt.beginPath();
35         //如何话圆形  arc函数
36         //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
37          cnt.fillStyle="#FF0000";
38         cnt.arc(220,40,20,0,360,false);                                                 cnt.closePath();
39         cnt.stroke();
40         cnt.fill();
41              //画图像
42                var img_1=new Image();
43            img_1.src="10.jpg";
44          //加载完毕后再绘图....
45            img_1.onload=function(){
46          //(object,x,y,weidth,height)
47                   cnt.drawImage(img_1,20,100,155,220);
48          //在画布上写字
49          //设置字体的大小
50          var text="火影忍着之战国时代"
51                  cnt.fillStyle="#0000FF";
52          cnt.font="30px 华文彩云";
53          cnt.fillText(text,200,200);
54                 }       
55        </script>
56      </body>
57 </html>>