Canvas基础

Canvas基础

1. 这个图从哪里来

A)展示绘图效果的标签,行内块元素
B)打开canvas,(通过getContext方法打开),然后在上面绘图

2.Canvas绘图步骤

• A)移动到开始位置
  • .moveTo(x,y)
• B)开始画线条
  • .lineTo(x,y)
• C)描边显示
  • .stroke()

3.画布大小在canvas标签设置

<canvas id=”cns” width=500 height=300></canvas>

4.描边颜色: .strokeStyle=’颜色’,必须在描边之前设置,否则不起效

5.描边宽度: .lineWidth=’6’,同上

6.解决锯齿的方法: 多画一条边(不推荐使用)

7.闭合路径: 从当前路径的起点到结束点连一条路径

• .closePath() 使用时,最后一条边可以省去

8.清除路径, .beginPath(); 为了防止重绘

9.填充: 把当前路径环绕起来的区域进行填充 .fill()

10.非零环绕原则:

• 是用来判断哪些区域属于路径内(计算结果非0,即为路径内)
• 在路径包围的区域中,随便找一点,向外发射一条射线
• 这条射线和所有围绕它的边相交
• 然后开启一个计数器,从0计数
• 如果这条射线遇到顺时针围绕,那么+1
• 如果遇到逆时针围绕,那么-1
• 如果最终值非0,则这块区域在路径内
  备注: 奇数边的区域一定在路径内

11.描边的时候,会占用原图形的一部分(线宽的一半),所以为了让线宽符合要求,最好是县填充,在进行描边,防止填充的时候覆盖线宽的一半

12.Canvas在绘制线条的时候,会向左向右偏移线宽的一半进行绘制,边缘会模糊

• 如果线宽为奇数,那么线宽的颜色值,会缩减一半
• 如果线宽为偶数,则看起来无影响

13.线帽样式: .lineCap=’butt’/’’round’/’square’

• butt: 默认
• round: 线头是圆的
• square: 线头两端增加线宽的一半

14.设置线帽样式: .lineJoin=’miter’/’round’/’bevel’

• miter: 默认值,两边向外延伸相交为尖角
• round: 圆头
• bevel: 两边相连为一平角

15.有交点按照交点样式来,没交点按照线帽样式来

16.画一个矩形路径: .rect(起点X坐标,起点Y坐标,宽,高)

17.绘制一个描边矩形,这个方法不会产生任何路径:

• .strokeRect(起点X轴坐标,起点Y轴坐标,宽,高)

18.绘制一个填充矩形,不会产生任何路径:

• .fillRect(起点X坐标,起点Y坐标,宽,高)

19.按照矩形大小来清除画布指定位置的内容:

• .clearRect(起点X坐标,起点Y坐标,宽,高)

20.渐变矩形使用RGB,颜色数值不能为小数,否色三明治画面

21.绘制虚线: .setLineDash([设置划线空白部分大小, 实线部分的大小])

• 设置值的个数为奇数时,系统存储的个数为设置个数*2

22.设置虚线绘制时的偏移量: .lineDashOffset = 3;

23.获取线条绘制规则: .getLineDash();

24.在坐标中指定位置画点,坐标算法:

• 点的X轴: 原点X坐标 + 点到原点的水平距离
• 点的Y轴: 原点Y坐标 - 点到原点的垂直距离

Canvas API:

1> getContext: 获取一个绘图环境
Width,height: 设置画布的宽高
2> .MoveTo(): 获取起点
3> .LineTo(): 画一条路径
4> .stroke(): 根据当前路径描边
5> .strokeStyle =’color’: 描边颜色
6> .fill(): 填充
7> .fillStyle = ‘color’: 填充颜色
8> .lineWidth = 3: 描边宽度
9> .closePath(): 闭合路径
10> .beginPath(): 清除路径
11> . rect(): 绘制一个矩形路径
12> .strokeRect(): 绘制一个描边矩形
13> .fillRect(): 绘制一个填充矩形
14> .clearRect(): 清除画布
15> . setLineDash([a,b,c,d]): 设置虚线规则
16> .setLineDash(): 获取虚线规则
17> .lineDashOffset = 2; 设置偏移量
18> .lineCap = ‘butt/square/round’ 设置线帽样式
19> .lineJoin = ‘miter/bevel/round’ 设置线交点样式
20> 画弧:
.arc(圆心X坐标，圆心Y坐标，半径，起点弧度，结束点弧度，是否逆时针方向[可选])
.arc方法内部会先路径结束点到弧的起点画一条路径线
说明: 起点弧度、结束点弧度以及弧度的方向共同决定了弧的大小

21> 画扇形（饼图）：
计算第一个扇形的起始角度和结束角度
startAngle = endAngle(上一个)
endAngle = engAngle（上一个）+ （360/total*data[i]）
每次需要先计算当前扇形的结束角度
这个扇形的结束角度 = 上一个扇形的结束角度 + 当前数值所对应的角度
22> 设置文字属性：
.font = 和CSS语法一样
注意：这里设置字体大小必须带单位，单位支持css所有单位
单独设置字体大小不会生效，必须加字体格式，比如微软雅黑
23> 绘制描边文字：
.strokeText(文字，参考X轴坐标，参考Y轴坐标，限制文字最大长度[可选])
24> 绘制填充文字：
.fillText(文字，参考X轴坐标，参考Y轴坐标，限制文字最大长度[可选])
25> 设置文字水平对齐方式：
.textAlign = ‘left || start’ / ‘right || end’ / ‘center’
默认值为start
26> 绘制文字的参考点：
设置文字的垂直对齐方式：
.textBaseline = ‘top’ /‘bottom’ /‘middle’ /‘alphabetic’ /‘hanging’ /‘ideographic’
默认值为alphabetic
27> 绘制图像:
.drawImage(获取标签，坐标X，坐标Y)
图片有自己的加载事件，img.onload = function () {}img加载完毕之后触发
有三种使用方式:

• 三个数版本:
  必须要在img图像下载完毕之后使用
  .drawImage(img,10,10)
  把图像绘制到指定坐标
• 五个参数版本:
  必须要在img图像下载完毕之后使用
  .drawImage(img,10,10,200,200)
  把图像绘制到指定坐标,并指定绘制图片的大小宽高
• 九个参数版本:
  把裁剪到的部分图像绘制到指定坐标,并指定绘制图片的大小
  .drawImage(img,图片开始截取X坐标,图片开始截取Y坐标,截取宽度,截取高度,10,10,200,200)

28> 状态的保存与回滚：
.save()把当前的状态（把当前状态的所有属性）copy一份保存，多次调用可以保存多份状态。
.restore() 把最近保存的一次状态作为当前状态
29> 平移坐标轴：
.translate(X轴平移量，Y轴平移量)
备注：已绘制的图形不会受影响，平移会累加。
30> 旋转坐标轴：
.translate(旋转的弧度)
备注：已绘制的图形不受影响，旋转会累加。
31> 缩放坐标轴：
.scale(X轴缩放的比值，Y缩放的比值)
备注： 已绘制的图形不会受影响，缩放会累加
31> 绘制一个旋转图形的步骤：
1.先平移坐标轴到图形的中心
2.旋转坐标轴
3.绘制图形（注意： 平移旋转之后，坐标体系发生变化，不能按照之前定好的坐标来绘制旋转图形）