Canvas学习笔记

　　* 自用笔记：Canvas学习 *

canvas简介

1. Canvas简介：
   
   • 概念：H5 提供的一个新的标签元素。中文：画布
     Canvas是指 可以在其上面 通过脚本语言（通常为js） 绘制图形、图像以及制作动画的标签。
   • Canvas本身不具备 绘制能力，只是负责展示。
   • 在浏览器不支持Canvas时，会将其当做div标签来解析。
   • 在IE中，会将其当做文本节点来解析

2. 基本使用

   • 创建一个画布
     javascript
<canvas>在浏览器不支持canvas时，会显示这段文本。</canvas>

     
     • 在创建一canvas标签时，如果没有指定宽和高，默认为 300 * 150 （px）
     • 要用canvas的相关属性设置其宽和高；否则，用其他方式指定canvas的宽和高，会在默认值的基础上进行缩放。
       而在缩放时，并没有增加canvas内部的像素点的个数。
   • 获取绘制工具
     javascript
// 第1步：获取相应画布
var canvas = document.getElementById('canvasId');
// 第2步：获取该画布的绘制工具
var ctx = canvas.getContext('2d|WebGL');

     
     • getContext方法：参数为 ‘2d’ or ‘WebGL’
       2d: 获取绘制平面图形的工具
       WebGL：获取绘制立体图形的工具
     • 在课程内，只学习绘制 2d 图形
     • 绘制工具是由归属的。只有画布自己的绘制工具 可以在本身上绘制图形、图像。
   • 坐标系
     
     • 原点 在canvas的左上角；
     • X轴：在原点的水平方向
     • Y轴：在原点的垂直方向
   • 基本绘制工具
     
     • 移动笔触moveTo(x, y) x 确定点的 横坐标；y 确定点的 纵坐标。
     • 画线lineTo(x, y): 从当前笔触所在点 连线 到 指定点。
   • 绘制直线步骤
     
     • 移动笔触moveTo
     • 画线lineTo
     • 描边stroke 或 填充fill
   • 练习
     
     • 绘制矩形
     • 绘制三角形
     • 梯形

   3 . 路径的概念

   • ctx.beginPath(): 开启路径。
   • ctx.closePath(); 闭合路径。
     
     • 将图形的起始点与终止点进行连线，形成一个封闭的图形
     • 会自动处理封闭图形的锯齿
   • 注意：
     
     1. 只有在需要开始新路径时，调用beginPath方法；
        在需要将图形闭合，形成封闭的图形，那么就可以调用closePath方法。
     2. 这两个方法并不一定要成对出现。
   • 除了stroke-或fill-开头的方法之外，都会绘制路径。此时需要手动调用stroke或fill方法
     +

   4 . 线性相关的属性

   • lineWidth： 设置线宽
   • strokeStyle：设置线条颜色，值可以为 16进制、颜色字符串、rgb、rgba、渐变色
   • fillStyle: 设置填充颜色
   • lineCap ：设置线段两端的样式
     
     • ’butt’: 默认
     • ‘round’: 设置线段两端为突出的圆角图形
     • ‘square’:设置线段两端为突出的方形图形
   • lineJoin: 设置线段相交点的样式
     
     • ’round’ ：圆角样式
     • ‘bevel’ : 平角样式
     • ‘miter’ : 尖角样式

   5 . 非零环绕原则

   • 目的：确定某一区域是否需要填充。
   • 描述：定义计数默认为0，从当前区域选取任意点，然后从该点到整个图形外部绘制一条射线。
     观察和这条射线相交的所有线段。
     如果该相交的线段是顺时针穿过这条射线，那么 计数 + 1；如果是逆时针穿过，那么计数就 - 1；
     如果计数为 0，那么就不填充该区域；
     如果计数非 0 ，那么就填充该区域。
   • 练习：绘制空心矩形
   • 总结：从左到右穿出 或 从上至下 穿出，那么就是顺时针。计数 + 1；
     否则， 计数 - 1；

   6 . 奇-偶原则

   • 目的：同上
   • 描述：就看相交线的个数，如果为奇数，就填充；否则就不填充。

   7 . 纵向的颜色渐变
   8 . 绘制坐标系
   9 . 折线图中点的描绘

   • 用小矩形来描绘点