Canvas 绘图基础与深入

一.Canvas绘图基础

什么是:
Canvas是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，
而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。
绘制时一定要在context绘图环境下绘制   *canvas是基于状态的绘制 把状态和绘制分开

1.HTML
<canvas id="canvas"></canvas>

2.JavaScript

设置绘图环境
var canvas = document.getElementById('canvas')
var context = canvas.getContext("2d")
使用context绘制  先设置起始点,终点和各种状态,再进行绘制

1.canvas的API
  1.canvas.width   canvas.height   canvas.getContext("2d") 
    设置绘图上下文环境
  2.context.moveTo(x,y)
    定义绘图起始点与节点   
  3.context.lineTo(x,y)
    定义绘图结束点
  4.context.arc(cx, cy, r, sAng, eAng, anticlock = false )  
    绘制圆或圆弧  圆心x轴坐标, 圆心y轴坐标, 半径, 起始点, 结束点, 绘制方向
  5.context.beginPath() 
    开始一段 新的 绘图   
  6.context.closePath()  
    结束一段绘制
  7.context.lineWidth 
    指定线条宽度
  8.context.strokeStyle = "rgba(12, 12, 3, .5)"   
    指定线条颜色
  9.context.fillStyle = "color"  
    设置填充颜色
  10.context.stroke()
    怎么用: stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
  11.context.fill()  
    对某个封闭图形进行填充
  12.context.clearRect(x,y, width, height)  
    x轴点, y轴点, 宽度, 高度  刷新当前画布上指定矩形区域内的图形

2.使用JS定时器进行动画
  setInterval(
    function(){
      render();  //进行渲染
      update();  //进行底层数据刷新
    },50)

二.canvas绘图详解
1.绘制封闭多边形 将多段线条放入beginPath() 和 closePath()

问题: 填充颜色时,会覆盖掉一半的边框
解决: 将颜色填充放到绘制线条前

2.rect函数

context.rect(x, y, width, height)  
  绘制一个矩形的边框路径
context.fillRect(x, y, width, height)
  绘制填充矩形
context.strokeRect(x, y, width, height)
  绘制一个带有边框的矩形

3.lineCap

线条属性,只能用于开头结尾,不能用于连接处 
  butt(默认值) round(圆头) square(方头)

4.lineJoin

设置线条连接处的样式
miter(默认值,尖头)   bevel(斜角)   round(圆角) 
①miterLimit 只能用于miter,

5.状态保存

save() 
  保存之前的绘图状态
context.restore()
  返回之前context.save()保存的绘图状态

6.图形变换

translate(x,y)  位移   
  在位移后需要再移动回去 translate(-x, -y)
  解决用状态保存
rotate(deg)     旋转
scale(x,y)      缩放
  会对其他属性如 边框, 起始位置 等也会产生缩放

7.变换矩阵

 a c e    a 水平缩放(1) b 水平倾斜(0)  c 垂直倾斜(0)
 b d f    d 垂直缩放(1) e 水平位移(0)  f 垂直位移(0)
 0 0 1
transfrom(a, b, c, d, e, f)
  transfrom可以多个进行级联
setTransform(a, b, c, d, e, f)
  忽略掉以前所有的transform,将变换矩阵重置为单位矩阵,再传入数据

8.填充样式

fillStyle 线性渐变
  1.设置线性渐变填充色
    ① var linearGrd = context.createLinearGradient(xstart, ystart, xend, xend)  //设置起点 与 终点
    ② linearGrd.addColorStop(stop, color)  //设置终点 与 颜色
    填充颜色
      context.fillStyle = linearGrd
  2.设置径向渐变
                                           //设置两个圆的圆心和半径
    ① var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1)  
    ② grd.addColorStop(stop, color)
  3.设置图片填充
    createPattern(img/canvas/video, repeat-style)  
    no-repeat 不重复  repeat-x 横向重复  repeat-y 纵向重复  repeat 重复
    图片填充通常是为了表现一种纹理或背景
    还可以用视频作为背景填充
    使用: 
      var backgroundImage = new Image()
      background.src = "url"
      var pattern = context.createPattern(backgroundImage, "no-repeat")
      context.fillStyle = pattern
      context.fillRect(0,0,800,800)

9.曲线绘制

arcTo()
先用moveTo创建开始点
再用acrTo(x1, y1, x2, y2, radius) 绘制一条圆弧
从(x1,y1) 与 (x2, y2)形成一个直角 radius是半径
半径与直角有两个相切点,两个切点形成一条圆弧

10.贝塞尔二次曲线

使用: moveTo(x0, y0)创建开始点
      quadraticCurveTo(x1, y1, x2, y2) 指定控制点 和 结束点

11.贝塞尔三次曲线

使用:
  moveTo(x0, y0) 移动到起始点
  bezierCurveTo(x1, y2, x2, y2, x3, y3) 两个控制点 一个结束点

三.文字渲染基础
1.设置字体样式

font 默认值 '20px sans-serif'
font-style: normal italic(斜体) oblique(倾斜字体) 
font-variant: normal small-caps(小型大写字母)
font-weight: lighter(更细)  normal bold bolder(更粗) 100~900
font-size: 20px默认  xx-small x-small medium large x-large xx-large
font-family: 设置多种字体备选  支持@font-face(向浏览器注入新字体) web安全字体

2.开始绘制文字

    fillText(string, x, y,[maxlen])     maxlen 指文本行最大宽度

3.绘制一行只有边框的文字

    strokeText(string, x, y, [maxlen])
    可以用渐变 图片填充等设置文字颜色

4.基于起始点调整文本水平位置

    textAlign
    left  center right

5.基于中间线调整文本垂直位置

textBaseline
top middle bottom alphabetic默认值(基于拉丁语的基准线) ideographic(基于中文,日文等方块字) hanging(基于印度文字)

6.文本的度量

    measureText(string).Width
    传入字符串,返回一个对象,计算字符串的渲染宽度

四.高级canvas
1.阴影

shadowColor
阴影颜色
shadowOffsetX
shadowOffsetY
阴影位移值
shadowBlur
阴影模糊值

2.全局透明度

    globalAlpha = 1(default)

3.设置遮挡效果

globalCompositeOperation
source-over 默认值 后绘制的压在先绘制的图形上
destination-over 先绘制的压再后绘制的图形上
destination-over 在源图像上方显示目标图像。
源图像 先绘制的 目标图像 后绘制的
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

destination-atop    在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示
destination-in  在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy    显示源图像。忽略目标图像。
xor     使用异或操作对源图像与目标图像进行组合。

4.剪辑区域

clip()
使用clip()规划任意路径,再用stroke()绘制,之后所有绘制都会限制到这个区域

5.非零环绕原则

判断图形内外侧
从一块区域向外引一条射线,图形路径为顺时针+1,逆时针-1,为0则在外面,不为0,在里面
规划路径通过相反路径,来做剪纸,镂空等效果

6.对指定矩形区域进行清空

 clearRect(x, y, width, height)

7.为元素添加事件

   canvas.addEventListener("mousemove", detect)

8.获取鼠标位置

    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;

9.判断鼠标传入位置

  isPointInPath()方法返回 如果指定的点位于当前路径中true,否则返回 false
  isPointInPath(x, y)

10.HTML与canvas

html不能放在canvavs中
canvas不是透明的,是白色的

11.canvas的原型对象

CanvasRenderingContext2D
制作自己的绘图函数