<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <canvas id="tankMap" width="400px" height="300px" style="background-color: black"></canvas>

    <script type="text/javascript">

        var heroX = ;

        var heroY = ;

        //得到画布

        var canvas1 = document.getElementById("tankMap");

        //取得画布画笔对象

        var cxt = canvas1.getContext("2d");

        //画出坦克

        cxt.fillStyle = "#DED284";

        //画出左面

        cxt.fillRect(heroX, heroY, , );

        //画出右边

        cxt.fillRect(heroX + , heroY, , );

        //中间矩形

        cxt.fillRect(heroX + , heroY + , , );

        //画出坦克的盖子

        cxt.fillStyle = "#FFD972";

        cxt.arc(heroX + , heroY + , , , , true);

        cxt.fill();

        //车出炮线

        cxt.strokeStyle = "#FFD972";

        cxt.lineWidth = 1.5;

        cxt.beginPath();

        cxt.moveTo(heroX + , heroY + );

        cxt.lineTo(heroX + , heroY);

        cxt.closePath();

        cxt.stroke();

    </script>

</body>

</html>

//效果图如下

HTML坦克大战学习01的更多相关文章

  1. 坦克大战学习笔记-TankWar

    最近学习了马士兵老师直播的单机版坦克大战,模仿的做了一个,整理一下思路记录下来,项目git地址:https://github.com/zhuchangli/TankWar/tree/master 视频 ...

  2. HTML坦克大战学习02---坦克动起来

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. C# 坦克大战学习总结

    1.学会用Resource管理资源 添加资源 在properties下的Resource.resx添加资源 使用资源 工程名.Properties.Resource.资源名 实际本质,是一个流. 2. ...

  4. 阶段学习总结-坦克大战（2D）案例

    这是前几天学习的案例,这两天学习了NGUI和UGUI,被UI搞得很烦躁,但是今天还是将前几天学习的坦克大战总结以下.这个游戏是小时候的经典红白机游戏的复刻,见截图: 一.游戏物体 游戏中包含地图元素( ...

  5. day01-GUI坦克大战01

    JavaGUI-坦克大战 1.Java绘图坐标体系 坐标体系介绍:下图说明了一个Java坐标体系.坐标原点位于左上角,以像素为单位.在Java坐标体系中,第一个是x坐标,表示当前位置为水平方向,距离坐 ...

  6. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  7. 【iScroll源码学习01】准备阶段

    前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...

  8. javascript 面向对象制作坦克大战 （一）

    PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写.   写这个的目的是为了巩固自己这段时间对js的学习.整理到博客上,算是对自己近端时间学习js的一个整理. 同时也希望可以帮助到学习js的园 ...

  9. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

随机推荐

  1. C# partial 关键字详解

    我们新建一个Windows Form时,后台代码都会自动添加如下代码: public partial class Form1 : Form { public Form1() { InitializeC ...

  2. libXext.so.6 libXp.so.6 libXt.so.6 is needed by openmotif21-2.1.30-11.el7.i686

    # rpm -ivh openmotif21--.el7.i686.rpm error: Failed dependencies: libXext.so. -.el7.i686 libXp.so. - ...

  3. 基于NOPI的Execl模板转换类,直接将Execl模板转换对应的Entity

    1.创建实体属性标记 public class CellAttribute : Attribute { /// <summary> /// /// </summary> /// ...

  4. Hive学习之函数DDL和Show、Describe语句

    创建/删除函数 创建暂时函数 以下的语句创建由class_name实现的暂时函数,该函数被创建后仅仅能够在当前会话中使用.会话结束后函数失效. 实现函数的类能够是Hive类路径中的随意类.能够使用Ad ...

  5. Maven实战（九）---模块聚合和继承

    类之间有聚合和继承关系,Maven也具备这种设计原则. 那么Maven的pom是怎样进行聚合与继承的呢? 一.什么是聚合?为什么要用聚合? 上一篇博客介绍了模块化的基本知识. 有了模块化,那么我们项目 ...

  6. Python type() 函数

    描述 type() 函数如果你只有第一个参数则返回对象的类型,三个参数返回新的类型对象.类似isinstance() isinstance() 与 type() 区别: type() 不会认为子类是一 ...

  7. Android studio 使用NDK工具实现JNI编程

    前言: Android开发中常常会使用到第三方的.so库.在使用.so库的时候就要用到JNI编程.JNI是Java Native Interface的缩写.它提供了若干的API实现了Java和其它语言 ...

  8. MySQL使用伪列

    在查询数据库的时候,我们有时候需要对查询出来的数据加上序列,1,2,3,……n 例如:我们根据表的某个字段排序后,要对这些数据加上序列,这个时候序号常常不是我们建表时设置好的自增的主键id,怎么办呢? ...

  9. Zookeeper命令操作

    Zookeeper支持某些特定的四字命令字母与其的交互.他们大多数是查询命令,用来获取Zookeeper服务的当前状态及相关信息.用户在客户端可以通过telnet或nc向Zookeeper提交相应的命 ...

  10. Servlet和Android网络交互基础（3）

    在上一章中採用了最简单的创建service端代码方式,但在实际开发中一般都会採用比較成熟的框架.以下是完整的maven+spring mvc 创建service的方式 下载安装Eclipse 和jdk ...