Canvas基础语法

1.1 什么是Canvas

canvas是HTML5提供的一个用于展示绘图效果的标签，canvas原意画布，帆布，在HTML5页面中用于展示绘图效果，最早canvas是苹果提出来的一个方案，今天已经在大多数浏览器实现了

1.1.1 canvas的基本用法

基本语法

<canvas></canvas>

1. 使用canvas标签，即可在页面中开辟一格区域，可以设置其width和height设置该区域的大小
2. 默认canvas的宽高为300*150
3. 不要使用css的方式设置宽高，应该使用HTML属性
4. 如果浏览器不支持canvas标签，那么会 将它解析成div标签，因此常常在canvas中嵌入文本，以提示浏览器的能力
5. canvas本身的兼容性非常强，只要支持该标签的，基本功能都是一样的，因此不用考虑兼容性问题
6. canvas本身不能绘图，是使用JavaScript来绘图，canvas对象提供了各种绘图的API

canvas的使用领域

canvas的适用领域很多：

1、游戏

2、可视化数据（重点）

3、banner广告

4、多媒体

5、未来

• 模拟仿真
• 远程操作
• 图形编辑

1.2基本绘图方法

---

1.2.1基本绘图方法

---

绘图步骤

1. 获得canvas对象
2. 调用getContext方法，提供字符串参数'2d'
3. 该方法返回 CanvasRenderingContext2D 类型的对象，该对象提供了基本绘图命令
4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图
5. 基本绘图命令

• 绘图：
  • 设置开始绘图的位置：context.moveTo(x,y);
  • 设置直线到的位置：context.lineTo(x,y);
  • 闭合路径：context.closePath();
• 描边
  • 描边颜色：context.strokeStyle = '颜色';
  • 描边宽度：context.lineWidth = 数值
  • 描边绘制：context.stroke();
• 填充
  • 填充颜色：context.fillStyle();
  • 填充绘制：context.fill();
• 线帽样式
  • context.lineCap = 'butt'、'round'、'square'
    • butt是默认值
    • round线头是圆的
    • square线头两端各增加线宽的一半
• 两线交点样式

• • context.lineJoin = 'miter'、'round'、'bevel'
    • miter是默认值，两边向外延伸相交为斜接
    • round，相交是圆头
    • bevel：两边相交是一个斜面
• 绘制虚线（设置画线的时候空白部分和实线部分的长度）
  • ctx.setLineDash( [ 虚线长度 ，实线长度 ，虚线长度 ， 实线长度 ...])
• 获取线条的规则
  • ctx.getLineDash();
• 设置绘制虚线的偏移量
  • ctx.lineDashOffset
• 清除当前路径，开始新的路径
  • context.beginPath();