canvas_01

初识canvas

• 广义：h5 新增canvas 2d 绘图功能
• 狭义canvas 是html 标签
• canvas可以理解为一张画布
• 在一张画布上画图需要笔，在canvas里面定义了一个上下文对象，获取它的方法是canvas.getContext(‘2d’)；

需要注意的是

使用画笔在canvas 上画画，要考虑三个方面：

• 颜色
• 形状
• 绘图方法

canvas 的尺寸不要使用css 设置

• canvas 的尺寸不能过大
• canvas 的尺寸尽量控制在4000 以内。
• canvas 具体极限值因浏览器、平台不同而不同

canvas 画图步骤

建立canvas 画布。
通过canvas 画布获取上下文对象，也就是画笔。
设置画笔颜色。
设置图形形状。
绘制图形。

一些绘制图形的方法

• 填充矩形方法：fillRect(x,y,w,h)
• 描边矩形方法：strokeRect(x,y,w,h)
• 清理矩形方法：clearRect(x,y,w,h)

绘制路径

1.开始建立路径：beginPath()
2.向路径集合中添加子路径：
[
moveTo(x,y); 形状; closePath() 可选,
moveTo(x,y); 形状; closePath() 可选,
moveTo(x,y); 形状; closePath() 可选,
]
3.显示路径：填充fill() ，描边stroke()

路径相关绘制方法

• 直线：lineTo(x,y); lineTo(x,y); lineTo(x,y);
• 圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)
• 切线圆弧：arcTo(x1,y1,x2,y2,半径)
• 二次贝塞尔曲线：quadraticCurveTo(cpx1,cpy1,x,y)
• 三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
• 矩形：rect(x,y,w,h)

相关路径绘制方法详解

1. 圆弧 arc(x,y,半径，开始弧度，结束弧度，方向)
   

2. 切线圆弧 arcTo(x1,y1,x2,y2,半径)
   

3. 二次贝塞尔曲线 quadraticCurverTo(cpx1,cpy1,x,y)
   
   ！！！ 值得注意的是cpx1,cpx2是参考点的位置，起点位置需要使用moveTo设置所以第二组参数是终点的位置

4. 三次贝塞尔曲线 bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)

路径的绘图原理

路径和子路径的概念

• 路径：
  路径是子路径的集合
  一个上下文对象同时只有一个路径，想要绘制新的路径，就要把当前路径置空。
  beginPath() 方法当前路径置空，也就是将路径恢复到默认状态，让之后绘制的路径不受以前路径的影响。

• 子路径：
  子路径是一条只有一个起点的、连续不断开的线
  moveTo(x,y) 是设置路径起点的方法，也是创建一条新的子路径的方法
  路径里的第一条子路径可以无需设置起点，它的起点默认是子路径中的第一个点

注：rect(x,y,w,h) 绘制路径时，会具备moveTo() 功能。

canvas 图形样式

1. 图形的着色区域

   • 描边区域： strokeStyle 代表了描边样式，描边区域的绘制方法是 stroke()、strokeRect() 或者strokeText() 。
   • 填充区域： fillStyle 代表了填充样式，填充区域的绘制方法是 fill()、fillRect() 或者fillText() 。

   

2. 图形的着色方式有3种

   • 纯色
     • 书写方式（与css 一致）：
       red
       #000000
       rgb(r,g,b)
       rgba(r,g,b,a)
     • 赋值方式:
       ctx.fillStyle= ‘red’
       ctx.strokeStyle= ‘ rgb(r,g,b) ‘
   • 渐变
     1. 建立渐变对象的方式：
        线性渐变 gradient=createLinearGradient(x1, y1, x2, y2)
        径向渐变 gradient=createRadialGradient(x1, y1, r1, x2, y2, r2)
     2. 定义渐变的颜色节点
        gradient.addColorStop(position, color)
     3. 赋值方式
        ctx.fillStyle= gradient
        ctx.strokeStyle= gradient

const linerGradient=ctx.createLinearGradient(x1,y1,x2,y2);
linerGradient.addColorStop(0,'red');
linerGradient.addColorStop(.5,'yellow');
linerGradient.addColorStop(1,'green');

const radGradient=ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
radGradient.addColorStop(0,'red');
radGradient.addColorStop(.5,'yellow');
radGradient.addColorStop(1,'green');

• 纹理
  1. 建立纹理对象：
     pattern=context.createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”);
  2. 为着色样式赋值
     ctx.fillStyle= pattern
     ctx.strokeStyle= pattern
     

3. 描边的样式

• strokeStyle：描边的颜色
• lineWidth：描边宽
• l ineCap：描边端点样式
• lineJoin：描边拐角类型
• miterLimit：拐角最大厚度（只适用于lineJoin=‘miter’ 的情况）
• setLineDash(segments)：将描边设置为虚线，可以通过getLineDash() 方法获取虚线样式
• lineDashOffset：虚线的偏移量

基本的线条属性

• lineWidth 线宽
  lineWidth 定义描边的宽度，它是从路径的中心开始绘制的，内外各占宽度的一半。
  
• lineCap 线条端点样式
  
• lineJoin 拐角类型
  
• miterLimit
  当lineJoin 为miter 时，若拐角过小，拐角的厚度就会过大。
  
  ctx.miterLimit=1 后，可避免此问题
  
• setLineDash(segments) 虚线

ctx.setLineDash([ 60, 90 ]);

 ctx.setLineDash([ 60, 90, 120 ]);
 

• lineDashOffset 虚线偏移
  

投影的属性

• 偏移位置：
  shadowOffsetX = float
  shadowOffsetY = float
• 模糊度： shadowBlur = float
• 颜色：shadowColor = color

注意事项

1：投影是上下文对象的一种属性，在绘制图形时，无论执行的是描边方法，还是填充方法，都会在其所绘图形的后面添加投影。
2：在绘制描边图形和填充图形的时候，都需要执行相应的方法，比如路径的fill() 、stroke() 方法。
而绘制投影时，则不需要任何方法，只要设置相应属性即可，这样在之后绘制图形的时候都会自带投影，无论这个图形是描边图形还是填充图形。