初识canvas

canvas用于在网页上的图形绘制

什么是canvas
canvas元素使用JavaScript在网页上绘制图像，专用于2D绘图

创建canvas元素

<canvas   width="500" height="300">
您的浏览器不支持canvas！
</canvas>

尽量不要使用css给canvas添加 width height 会使整个画布拉伸

canvas的用途
（这里只是做简单介绍,绘制的图像以及属性）

.在JavaScript里面进行绘制，JavaScript中每次使用canvas，都要设置一个绘图环境，得到一个对象进行操作

 // 获取canvas  拿到画布
    var canvas = document.getElementsByTagName('canvas')[0];
// 获取画布的上下文   通过上下文拿到画笔
    var ctx = canvas.getContext('2d');

  ctx.strokeRect(x,y,width,height) 绘制描边矩形
  x :距离原点横轴的距离 （原点是画布的左上角位置）
  y :距离原点纵轴的距离
  width :矩形的宽
  height :矩形的高

//设置颜色
ctx.strokeStyle = "#00f";
//矩形线条宽度
cxt.strokeWidth = 1;
ctx.strokeRect(5,5,100,100)

！！！canvas绘制图像设置样式要在图像前面，否则没有效果

  fillRect(x,y,width,height)绘制填充矩形
  用法和参数 同strokeRect()基本一样

//设置颜色
ctx.fillStyle = "#00f";
ctx.strokeRect(5,5,100,100)

  fillText(text, x, y); strokeText(text, x, y)
  text 文本
  x 文字距离原点横轴的距离
  y 文本距离原点纵轴的距离

绘制文本有个有趣的东西，绘制英文的时候会根据国外四线三格的写法来绘制
画的不太好，不齐Hhhh，别在意这些