canvas

**

简介：

**
canvas是H5中新增的元素，可以通过JavaScript中的脚本绘制图形
注意;
我们在使用canvas时，遇到低版本浏览器不支持时，我们在canvas标签中添加的所有元素内容都会被显示出来，我们就可以利用这一点添加提醒语句，如果支持则不管canvas中存在什么都会被隐藏不会显示，我们在浏览器看到的只是canvas，通俗的来讲canvas只是画布

**

使用：

**
canvas只是一个画布，要想在其上绘制内容我们需要找到他的渲染上下文
getContext（）方法，这个方法主要是用来获得渲染上下文和实现绘画功能，简单的说就是获得画笔
语法：
1、得到画布元素
2、var ctx = 画布元素.getContext(‘2d’); //参数为2d 变量我们一般使用ctx

我们在使用getContext（）这个方法是我们要做检查，检查浏览器是否支持这个ff，通常我们通过if来判断是否存在这个方法

canvas绘制矩形：
1、填充的矩形语法：
ctx.fillRect(x,y,width,heigth);
2、空心边框矩形：
ctx.strokeRect(x,y,width,heigth);
**

注意：

**
在使用canvas画矩形时，我们的偏移量（x，y）为整数时，实际的边框的宽度为2像素，如果我们想要画1像素的边框，我们在偏移量上个加0.5，则我们画出来的就是1px的边框
画1px的边框的矩形还有另一个方法：
clearRect方法：这个方法就填充一个与底色相同的矩形 清除格式（）清除画布上的内容
ctx. clearRect（x,y,width,heigth）;

**

填充矩形的颜色和边框：（属性）

**
fillStyle方法就是为填充的矩形填充颜色
语法：
ctx.fillStyle = “pink”;
边框颜色：
strokeStyle为空心边框添加边框颜色
ctx.strokeStyle = “pink”;

**

边框的宽度：

**
lineWidth
语法：
ctx . lineWidth =10； //宽度不带单位

注意：
canvas中的样式只有通过自己去写（不可以通过css去写），写在其内部，并且其样式（颜色，边框）要写在最前面，写在后面不起作用，（同步的）与js异步不同，简单的说就是所见及所得

**

覆盖效果：

**
写在后边的会覆盖前面的

lineJoin属性：
边框的形状：
round：圆角
bevel：斜角
miter：直角
语法：
ctx.lineJoin = “round”;