坦克大战--chapter01

JavaScript项目

1. 生成画布

<canvas id="canvas" width="500" height="500" style="background: black"></canvas>

  canvas看起来和 img 标签一样，只是 canvas 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。​如果不给 canvas 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 canvas 的宽高。替换内容​由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 canvas，在这些浏览器上你应该总是能展示替代内容。​支持 canvas 的浏览器会只渲染 canvas 标签，而忽略其中的替代内容。不支持 canvas 的浏览器则 会直接渲染替代内容。用文本替换：canvas
   你的浏览器不支持 canvas，请升级你的浏览器。
   结束标签不可省略。与 img 元素不同，canvas 元素需要结束标签(/canvas)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

2.获取canvas对象

var canvas = document.getElementById("canvas");

3.获取上下文环境 context提供了很多绘图的函数

var ctx = canvas.getContext("2d");

4.先声明一个tank函数，之后再添加规定移动方位的函数

function heroTank (x,y,direct){
   
    this.x = x;
    this.y = y;
    this.direct = direct;
    this.speed = 3;
}

5.创建坦克对象并进行作画

var hero = new heroTank(30,30,0);
function drawTank(hero){
   
    cxt.fillStyle