一、Canvas 概述


Canvas概述

    - Canvas 是 HTML5 出现的新标签，像所有DOM一样，拥有自己的属性、方法和事件，其中就会绘图的方法，JavaScript 能够调用它在网页上完成绘图

    - Canvas 也是 HTML5 中最强大的特性之一。允许开发者使用动态和交互式可视化方法在Web上实现桌面应用程序的功能

wKiom1b6MuSC3j3RAABbtDFH01c951.png


创建 Canvas

    - <canvas> 元素会在网页上创建一个空白矩形区域，然后通过API操作这个区域，与空白

的<div>元素相似，但用途完全不同

    - 默认情况下，创建的<canvas>元素没有边框的内容

    - 语法:

wKiom1b6NEvAdSw5AAB51wYnSmU089.png


getContext()方法

    - 在使用<canvas>元素时，要调用getContext()方法，其目的是得到画布的绘图上下文。通过这个引用，就可以使用其他的API进行绘图操作

    - 语法:

wKiom1b6NY2Q05S_AAEtjyrWbTo842.png


二、Canvas 绘图


绘制矩形

    - 在准备好Canvas之后，就可以创建和绘制实际图形了。API提供的工具非常广泛，包括创建图形、颜色、文本等

    - API 中的一些方法支持在画布上直接绘图，但这些方法专门用于绘制矩形形状、并且是唯一能够生成基础形状的方法。要想绘制其他形状，就要组合使用其他的绘图方法以及复杂路径

    - 绘制矩形方法(生成基础形状方法):

        - fillRect(x,y,width,height)

        - strokeRect(x,y,width,height)

        - clearRect(x,y,width,height)

    - fillRect(x,y,width,height)

        - 绘制实心矩形

        - x,y 指定矩形的左上角位置

        - width,height声明其尺寸

    - strokeRect(x,y,width,height)

        - 与前一个方法类似，绘制空心矩形

    - clearRect(x,y,width,height)

        - ***楚属性所有指定的区域的像素。类似于矩形擦除器

wKioL1b6OeuDAwMQAAF9OXxSm7o038.png



颜色

    - 在创建图形时如果不设定颜色，那么所有图形都会使用默认颜色-纯黑色

    - 可以通过以下属性指定绘图颜色:

        - strokeStyle: 声明形状线条的颜色

        - fillStyle: 声明形状内部区域的颜色

        - globalAlpha: 透明度属性。可以设置画布上图形的透明度

wKiom1b6Of_h-Ow5AAGctFaBUak781.png


渐变

    - Canvas支持的渐变效果包括线性渐变或射线渐变，并且支持设置颜色转折点

    - 语法:

        - createLinearGradient(x1,y1,x2,y2): 在画布上创建一个线性渐变对象

        - createRadialGradient(x1,y1,r1,x2,y2,r2):在画布上创建一个射线渐变对象

        - addColorStop(position,color): 指定渐变颜色值

wKioL1b6O1aihTbBAAHc33XajAQ994.png



文字

    - 在画布上写文字非常简单，只需要定***一些属性和方法即可

    - 属性

        - font: 与css的font属性类似，接受值也完全相同

        - textAlign:水平对齐方式，值可以是left、right和center

        - textBaseline:文本基线，值可以是top、hanging(悬挂基线)、middle、alphabetic(默认值，字母基线)和bottom

    - 方法

        - stockText(test,x,y):在位置(x,y)处绘制指定文字的轮廓

        - fillText(text,x,y): 与上一个方法相似，区别是该方法绘制的是实心文字

        - measureText(): 返回指定文字的大小信息

function initial(){
    var elem = document.getElementById('canvas');
    canvas = elem.getContext("2d");
    canvas.font = "bold 24px verdana,sans-serif";
    canvas.textAlign = "start":
    canvas.textBaseline = "bottom";
    canvas.fillText("BeiJing Alibaba",100,124);
    var size = canvas.measureText("BeiJing Alibaba");
    canvas.strokeRect(100,100,size.width,32);
}


阴影

    - 阴影也是Canvas API的重要组成部分。每一条路径和文字都可以创建阴影想过。API提供了4个实现阴影效果的属性

        - shadowColor: 使用CSS语法声明阴影颜色

        - shadowOffsetX:接受一个数字，确定对象阴影的水平投射距离

        - shadowOffsetY:接受一个数字，确定对象阴影的垂直投射距离

        - shadowBlur: 为阴影生成模糊效果

function initial(){
    var elem = document.getElementById("canvas");
    var canvas = elem.getContext("2d");
    canvas.shadowColor = "rgba(0,0,0,0.5)";
    canvas.shadowOffsetX = 4;
    canvas.shadowOffsetY = 4;
    canvas.shadowBlur = 5;
    canvas.font = "bold 50px verdana,sans-serif";
    canvas.fillText("BeiJing Alibaba",100,124);
    var size = canvas.measureText("BeiJing Alibaba");
}



创建路径

    - 以上介绍的方法都是直接在画布上绘画，但是针对一些复杂图形的绘制，就需要自己通过路径进行描绘

    - 路径就是画笔移动的地图，路径建立后，将其发送给上下文，就可以再画布上实际地绘制出图形

    - 方法:

        - beginPath():开始一个新的形状描述。创建路径之前，必须先调用这个方法

        - closePath():关闭路径，用直线将最后一个点与原点相连，如果想保留开放路径，则不需要调用这个方法

    - 除此之外，还有三个方法可以再画布上绘制路径

        - stroke(): 将路径绘制为轮廓形状

        - fill(): 将路径绘制为实心形状。使用该方法时可以不用closePath关闭路径。该方法会通过直线连接最后一个点与第一个点实现封闭

        - clip():在上下文中设置裁剪区域

    - 以下方法可用于设置路径和创建真正的形状

        - moveTo(x,y): 将笔触移到指定的位置

        - lineTo(x,y): 绘制一条直线，连接当前笔触位置到x和y属性声明的新位置

        - rect(x,y,width,height):生成一个矩形路径

        - arc(x,y,radius,startAngle,endAngle,direction):这个方法可以在位置(x,y)上生成弧线或圆形，半径和弧度分别由属性指定，direction是布尔类型，表示顺时针或逆时针方向

wKioL1b6VC2DMQFOAACcJvgbmlc539.png


线型

    - 到目前为止，所有画布操作都使用相同的线型，即默认线型。实际上线条的宽度、端点都可以根据实际绘图需要进行调整。

    - 以下是修改线型的属性:

        - lineWidth: 指定线条粗细，默认值是1.0

          canvas.lineWidth = "10";

wKiom1b6VCHBo2G1AAAaBHNwNvo236.png

    - 属性

        - lineCap: 指定线条端点形状，支持的值由以下三个

          butt: 默认,向线条的每个末端添加平直的边缘

          round:向线条的每个末端添加圆形线帽 

          square: 向线条的每个末端添加正方向线帽

          注意: round和square会使线条略变微长

wKiom1b6VTmgEcOjAAAt0o9mZh0016.png        - lineJoin: 指定两条线之间的连接点形状，可选值

        - miterLimit: 与lineJoin一起使用，当lineJoin设置为miter时，可用于确定线条交接点的延伸范围

wKioL1b6VkWwn5aSAABN5WllOPg626.png


三、处理 Canvas 中的图像


绘制图像

    - 在 HTML5 中，不仅可以使用 Canvas API 来绘制图形，还可以读取磁盘或网络中的图像文件，然后使用 Canvas API 将该图像绘制在画布中

    - 绘制图像时，是要使用drawImage方法，定***如下:

        - drawImage(p_w_picpath,x,y)

            p_w_picpath:可以是p_w_picpath元素、video元素、js中的Image对象

            x:起始横坐标

            y:起始纵坐标

        - drawImage(p_w_picpath,x,y,w,h)

            w:宽度

            h:高度

wKioL1b6V6bCdS6BAALjR-Dxjt0621.png


平铺图像

    - 所谓图像平铺就是用按一定比例缩小后的图像将画布填满。实现图像平铺的方式有两种，一种是前面介绍的drawImage方法;另一种方法是使用上下文对象的createPattern()方法

    - 语法: canvas.createPattern(p_w_picpath,type)

        - no-repeat: 不平铺

        - repeat-x:  水平方向平铺

        - repeat-y:  垂直方向平铺

        - repeat:    全方向平铺


wKioL1b6WUOy0B96AAKecjf3euw881.png


切割元素

    - 在 Canvas中，不仅能以各种方式平铺绘制的图像，还可以通过上下文环境中的clip()方法切割画布中的绘制图像。clip()方法调用格式如下:

      canvas.clip()

    - 该方法用于切割使用路径方式在画布中绘制的区域。因此，在使用该方法前，必须使用路径在画布中绘制一个区域


wKioL1b6WIvh9MRDAAIcwyDHdVI303.png


画布方法

    - 状态方法

        - save()，保存当前画布属性、状态

        - restore(),恢复画布属性、状态

    - 转换方法

        - scale(), 缩放当前绘图更大或更小

        - translate(),重新映射画布上的(0,0)位置

        - rotate(),旋转当前画布，公式为 degrees * Math.PI / 180;


总结：本章内容主要介绍了下 HTML5 Canvas绘图(Canvas概述、Canvas绘图、处理 Canvas 中的图像)