Canvas基础知识(1)

Canvas 标签：在网页中实时生成图像，并操作图像内容（通俗就是在网页中画画）
canvas画布可以制作在线绘图工具,
canvas画布可以制作动态数据图纸.常用于网站后台的数据统计功能.
canvas画布可以用于制作HTML5游戏
canvas画布可以制作app应用.....


书写：
<canvas id=“myCanvas” width=“500” height=“300”></canvas>
     注意：
      0.IE9+浏览器支持
          1.默认300宽度，150高度
          2.不要使用css给canvas设置宽度和高度－导致绘制的图形被缩放
          3.canvas提供一个画图空间，有canvas API进行绘图


使用：
获取canvas对象
  var obj = document.getElementById('myCanvas');
  // canvas的宽度和高度
    console.log(obj.width);
    console.log(obj.height);
获取绘图环境
  var ctx = obj.getContext('2d');
  


Canvas绘图常见图形
直线
    方法
    moveTo(x,y):将鼠标移动到指定的点
    lineTo(x,y):将画笔移动到指定x,y点，形成一条直线
    stroke():将点绘制成直线


    属性
    lineWidth:直线的厚度
    strokeStyle:直线(边框)的颜色
    lineCap:直线头尾的样式（不占据原来直线的长度）
        butt:默认
        round:圆形
        square:方形（多出宽度一半的值）
    lineJoin:两条直线的夹角的样式
        miter:默认尖角
        round:圆形
        bevel:斜角


代表没有绘制结束
开启路径
  beginPath()
关闭路径
  closePath()


虚线
    moveTo(100,100)
    lineTo(400,100)
    setLineDash([5,10])        5:线段的长度    10:线段的间距
    setLineDash([5,10,15,20])    奇数线段长度，偶数线段间距
         注意：如果是奇数个数，会复制数组元素为偶数，然后进行循环


矩形
    fillStyle:填充颜色
    strokeStyle:矩形边框颜色


    fillRect(起始点的横坐标，起始点的纵坐标，矩形的宽度，矩形的高度):绘制矩形框并填充颜色
    strokeRect(起始点的横坐标，起始点的纵坐标，矩形的宽度，矩形的高度):绘制矩形框设置边框的颜色
    clearRect(起始点的横坐标，起始点的纵坐标，矩形的宽度，矩形的高度):清空指定矩形内容




圆弧(圆形)
    arc(圆心横坐标，圆心纵坐标，半径，开始弧度，结束弧度，逆时针true|顺时针false方向绘制)
    起点和终点，圆弧结合起来组成的图形（PI/2的形状协助理解）


    canvas很多都是利用弧度进行计算的
    (***)角度和弧度计算公式：弧度 = 角度*Math.PI/180
     全圆：2PI(360)
     半圆：PI(180)
     1/4圆：PI/2(90)


曲线
    moveTo(移动到指定位置的横坐标，指定位置的纵坐标)
    arcTo(第一组控制点的横坐标，纵坐标，第二组控制点的横坐标，纵坐标，圆弧的半径)


    二次贝塞尔曲线
    quadraticCurveTo(第一组控制点横坐标，第一组控制点纵坐标，第二组控制点横坐标，第二组控制点纵坐标)
    context.moveTo(100,200);
    context.quadraticCurveTo(200,100,400,300);


    三次贝塞尔曲线
    bezierCurveTo(第一组控制点横坐标，纵坐标，第二组控制点横坐标，纵坐标，第三组控制点横坐标，纵坐标):三组控制点来掌控曲线方向
    context.moveTo(100,200);
    context.bezierCurveTo(150,150,300,300,400,100);


文本
    方法
    fillText(text, x, y, [maxWidth]):填充方式绘制文本
    strokeText(text, x, y, [maxWidth]):绘制文字边框颜色


    文本属性
    font属性：跟CSS一样
    textAlign属性：设置文字水平对齐方式
        start(默认) end left right center
    textBaseline属性：文本垂直方式
        top hanging middle alphabetic(默认) ideographic bottom
            悬挂             字母排序    思想的
    measureText():获取文本的宽度


平移旋转缩放
    translate():移动(横坐标，纵坐标)
        注意：移动的同时，也将坐标原点移动


    scale(x的方向的缩放倍数,y方向的缩放倍数):缩放


    rotate(弧度):旋转的弧度
        注意：如果要旋转，默认是以坐标原点旋转的，所以如果要旋转，必须确认坐标原点在哪里


save()/restore():将这两个方法之间的代码独立，里面的样式设置不会带外面的绘制产生影响


属性：
  globalAlpha:设置全局的透明度
  globalCompositeOperation：图片合成：
    source-over 默认。在目标图像上显示源图像。
    source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
    source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
    source-out  在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。


    destination-over  在源图像上方显示目标图像。
    destination-atop  在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
    destination-in  在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
    destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
    lighter 显示源图像 + 目标图像。
    copy  显示源图像。忽略目标图像。


线性渐变：指定区间的颜色过渡
  var color = context.createLinearGradient(起始点横坐标，起始点纵坐标，宽度，高度)
  color.addColorStop(偏移值，颜色)


径向渐变(两个圆心的连线进行颜色过渡，两个圆的切线的焦点处进行颜色的扩散)
  var color = context.createRadialGradient(开始圆心横坐标，圆心纵坐标，半径，结束圆圆心横坐标，结束圆圆心纵坐标，结束圆的半径);
  color.addColorStop(偏移值，颜色)


阴影
  阴影颜色
  context.shadowColor = 'red';
  阴影偏移值
  context.shadowOffsetX = 20;
  context.shadowOffsetY = 20;
  设置模糊值
  context.shadowBlur = 4;


图片对象
  将图片绘制到canvas画布中
  drawImage(imgObj,起始横坐标，纵坐标，[固定宽度]，[固定高度]);


  创建图片并设置图片是否重复
  var bg = createPattern(imgObj,'repeat|repeat-x|repeat-y|no-repeat'):指定的方向内重复指定的元素
  ctx.fillStyle = bg;


  像素操作
  // 获取canvas画布 指定区间位置 的 像素点集合对象
  var obj = ctx.getImageData(起始横坐标，起始纵坐标，宽度，高度)
    obj.width:行像素个数
    obj.height:列像素个数
    obj.data:整体像素组的颜色组成的数组
    obj.data.length:像素个数的4倍（1个像素点4个颜色值）
        rgba()都是0-255的范围，透明度也是


  // 将图像obj写入到指定的canvas区间内
  putImageData(obj,起始横坐标，起始纵坐标)


  // 创建图像
  createImageData(宽度，高度)