canvas画布——1、canvas基本概念 2、画布的尺寸和坐标 3、绘制线段和填充多边形 4、矩形的绘制 和 填充 5、曲线的绘制和填充 6、绘制文本信息 7、图片 8、清除画布指定元

目录

一、canvas画布

1、canvas基本概念

2、画布的尺寸和坐标：

3、绘制线段和填充多边形：

4、矩形的绘制 和 填充

5、曲线的绘制和填充

6、绘制文本信息

7、图片

8、清除画布指定像素

---

一、canvas画布

SVG矢量图：就是用标签代码来画图

canvas:是H5出的技术，用JS来画图    （ SVG和canvas都是代码）

img:是图片，是图片编码

1、canvas基本概念

canvas：画布，h5新标签；

1. canvas本身没有任何外观，只是在文档中创建了一个画板；

2. ie9之前的版本不支持canvas；

3. 画布的宽度和高度要用canvas的属性设置，不要直接在css里面定义；如果再css里写了宽高也会覆盖canvas里的属性，只会可能会引起图片的失真

4. 画布的getContext()方法返回一个“绘制上下文”对象； 绝大多数的画布绘制API来自这个对象； 也就是说画布元素和他的上下文对象是两个完全不同的概念； 调用该方法时，传递的参数是“2d”，也就是getContext('2d')，可以在画布上绘制二维图像； 3d绘制就相对比较复杂了，具体实现还在规范中；getContext('2d')返回的是：CanvasRenderingContext2D

5. canvas可以用于双屏互动、大数据页面（百度出的框架echarts）、游戏、广告、特效（五角星）

6. canvas属于图片，它自己有默认的宽高（300，150），如果在行内不写宽高用默认的，而且在css那边写宽高，就会压缩拉升，失真

如果自己定义写一个标签，比如：<hai>这是我自己写的，浏览器不认识我，就会把我当作一个文本标签显示</hai>

<canvas id="box" width="20" height="20">  浏览器认识我，所以我这句话不会显示出来</canvas>

context 上下文（代码）：用的技术是由底层实现的，我们写的是上层代码，直接调用，使用下层代码

    <canvas id="box" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d") 
    </script>

2、画布的尺寸和坐标：

– 画布以左上角(0, 0)为坐标原点；

– 往右为X轴的坐标不断增大；

– 往下为Y轴的坐标不断增大；

3、绘制线段和填充多边形：

1.绘制线段的API是上下文对象的方法；

2.beginPath：     开始定义一条新的路径；