<!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. pythonl练习笔记——python线程的GIL

    python线程中的全局解释器锁GIL(Global Interpreter Lock) python-->支持多线程-->同步和互斥-->加锁-->解释器加锁-->解释 ...

  2. JMeter学习笔记--详解JMeter定时器

    定时器的处理优先于同一作用域内的采样器,如果在同一作用域内有多个定时器,那么所有的定时器都会在每个采样器之前处理. 若定时器所在作用域内无采样器,那么定时器不会被处理 固定定时器,每个线程在请求之间间 ...

  3. AspxPivotGrid和WebChartControl数据联动处理日志

    AspxPivotGrid具有很好的表格样式体验,WebChartControl也是个很内容丰富的做图控件,我希望实现的功能是这样的, 处理题库统计分析图表,用户点AspxPivotGrid绑定知识点 ...

  4. BIP_BI Pubisher的SQL/XSL/FO扩展函数应用（概念）

    2014-12-01 Created By BaoXinjian

  5. Linux时间子系统(十五) clocksource

    一.前言 和洋葱一样,软件也是有层次的,内核往往需要对形形色色的某类型的驱动进行抽象,屏蔽掉其具体的特质,获取该类驱动共同的逻辑,而又根据这些逻辑撰写该类驱动的抽象层.嵌入式系统总是会提供timer的 ...

  6. Okhttp常用方法示例

    这是我用到的一个util类 public class HttpBaseService { private OkHttpClient client = new OkHttpClient(); priva ...

  7. STM32 usb_mem.c和usb_sil.c文件的分析

    转:http://blog.csdn.net/u011318735/article/details/17424515 这两个c文件都还算是很简单的,先讲讲usb_mem.c这个文件.从文件名就能知道跟 ...

  8. 【Android】5.0 第5章 常用基本控件--本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-06 这一章主要介绍Android简单控件的基本用法.本章源程序共有9个示例,这些示例都在同一个项目中. 项目名:ch05demo ...

  9. C++程序文件链接

    1.什么是转换单元程序中的每个.cpp文件和它包含的所有头文件称为一个转换单元.编译器处理每个转换单元,生成二进制对象文件,用扩展名.obj来标识.链接器将对象文件组合起来,生成一个可执行文件,用扩展 ...

  10. nrm 的使用

    我们介绍过cnpmjs.org和淘宝 npm 两个 NPM 镜像.除此之外,还有一些国外的 NPM 镜像.不同地区访问不同的镜像速度可能有差异,因此有时候需要切换 NPM 镜像.相比每次切换时都手动指 ...