HTML5新特性之Canvas

1、概念

canvas标签

相当于是一块画布（var canvas = document.getElementById("myCanvas");）

getContext(“2d”)

canvas标签是画布，那么在这块画布上面绘制各式各样图片文字等等的工具是什么？就是canvas标签的一个方法getContext(“2d”), 它返回一个对象，这个对象也叫画布的“上下文”，这个对象提供了各种属性和方法，用来在画布上绘制文本、线条、矩形、图形等等。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContenxt("2d");

2、来实现一个效果

canvas效果三板斧：落笔ctx.moveTo(x, y) --> 连线ctx.lineTo(x, y) --> 描边ctx.stroke()

来绘制一个三角形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContenxt("2d");
ctx.moveTo(50, 50); //起始座标50，50
ctx.lineTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(50, 50);
ctx.lineWidth = 2;
ctx.stroke();  //描边

效果图：

3、getContext(“2d”)对象的属性和方法列表

3.1 颜色、样式和阴影的属性和方法

• fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
• strokeStyle：设置或返回用于笔触的颜色、渐变或模式
• shadowColor：设置或返回用于阴影的颜色
• shadowBlur：设置或返回用于阴影的模糊级别
• shadowOffsetX：设置或返回阴影与形状的水平距离
• shadowOffsetY：设置或返回阴影与形状的垂直距离

---

• createLinearCradient()：创建线性渐变（用在画布内容上）
• createPattern()：在指定的方向上重复指定的元素
• createRadialGradient()：创建放射/环形的渐变（用在画布内容上）
• addColorStop()：规定渐变对象中的颜色和停止位置(通常配合createLinearCradient()和createRadialGradient()使用)

3.2 线条样式

• lineCap：设置或返回线条的结束端点样式。值类型有butt(默认，向线条的每个末端添加平直的边缘)；round(向线条的每个末端添加圆形线帽)；square(向线条的每个末端添加正方形线帽)
• lineJoin：设置或返回两条线相交时，所创建的拐角类型。值类型有bevel(斜角)；round(圆角)；miter(默认，尖角)
• lineWidth：设置或返回当前的线条宽度
• miterLimit：设置或返回最大斜接长度, 和lineJoin的miter配合使用

3.3 矩形相关方法

• rect()：创建矩形，配合stroke()和fill()使用。rect()+stroke()等效于strokeRect()；rect()+fill()等效于fillRect()
• fillRect()：绘制”被填充“的矩形
• strokeRect()：绘制矩形（无填充）
• clearRect()：在给定的矩形内清除指定的像素

3.4 路径相关方法

• fill()：填充当前绘图（路径）
• stroke()：绘制已定义的路径
• beginPath()：起始一个路径，或重置当前路径
• moveTo()：把路径移动到画布中指定点，不创建线条
• closePath()：创建从当前点回到起点的路径
• lineTo()：添加一个新点，然后再画布中创建从该点到最后指定点的线条
• clip()：从原始画布剪切任意形状和尺寸的区域
• quadraticCurveTo()：创建二次贝塞尔曲线
• bezierCurveTo()：创建三次贝塞尔
• arc()：创建弧/曲线(用于创建圆形或部分圆)
• arcTo()：创建两切线之间的弧/曲线
• isPointInPath()：如果指定的点位于当前路径中，则返回true, 否则返回false

3.5 转换相关方法

• scale()：缩放当前绘图至更大或更小
• rotate()：旋转当前绘图
• translate()：重新映射画布上的(0,0)位置
• transform()：替换绘图的当前转换矩阵
• setTransform()：将当前转换重置为单位矩阵。然后运行transform()

3.6 文本属性和方法

• font：设置或返回文本内容的当前字体属性
• textAlign: 设置或返回文本内容的当前对齐方式
• textBaseline：设置或返回再绘制文本时使用的当前文本基线

---

• fillText()：在画布上绘制”被填充的“文本
• strokeText()：在画布中绘制文本（无填充）
• measureText()：返回包含指定文本宽度的对象

3.7 图像绘制

• drawImage()：向画布上绘制图像、画布或视频

3.8 像素操作属性和方法

• width： 返回ImageData对象的宽度
• height：返回ImageData对象的高度
• data：返回一个对象，其包含指定的ImageData对象的图像数据

---

• createImageData()：创建新的、空白的ImageData对象
• getImageData()：返回ImageData对象，该对象为画布上指定的矩形复制像素数据
• putImageData()：把图像数据（从指定的ImageData对象）放回画布上

3.9 合成

• globalAlpha：设置或返回绘图的当前alpha或透明值
• globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上

4、一些测试示例

先看效果图

这里贴下”随机折线图“的代码，其他的见github上demo
https://github.com/xiaotanit/Tan_HtmlDemo/blob/master/JS/h5%E6%96%B0%E7%89%B9%E6%80%A7.html

//随机折线图
function canvasRandomLine(){
    clearAllLayer()

    var maxW = canvasEle.width, maxH = canvasEle.height, boxW = 20;
    var rowsCount = maxH/boxW, colsCount = maxW/boxW;
    var maxX = maxW%boxW==0? boxW*(colsCount-1):boxW*colsCount;
    var maxY = maxH%boxW==0 ? boxW*(rowsCount-1):boxW*rowsCount;

    canvasGrid(); //绘制底层格子图
    //绘制格子图
    canvasArrows(); //绘制箭头
    canvasOther(); //绘制其他随机线
    function canvasGrid(){
        ctx.beginPath();
        ctx.strokeStyle = '#999999';
        ctx.lineWidth = 0.5;

        console.log(rowsCount, ", ", colsCount)
        //行格子
        for (let i = 0; i < rowsCount; i++){
            ctx.moveTo(0, boxW*i)
            ctx.lineTo(maxW, boxW*i)
        }
        //列格子
        for (let i = 0; i < colsCount; i++){
            ctx.moveTo(boxW * i, 0);
            ctx.lineTo(boxW*i, maxH)
        }
        ctx.stroke()
    }
    //绘制箭头
    function canvasArrows(){
        ctx.beginPath();

        ctx.moveTo(boxW, boxW);
        ctx.lineTo(boxW, maxY);
        ctx.lineTo(maxX, maxY);
        ctx.strokeStyle = '#0000ff';
        ctx.stroke();

        //绘制两个箭头
        ctx.beginPath();
        ctx.moveTo(boxW, boxW);
        ctx.lineTo(boxW-5, boxW+10);
        ctx.lineTo(boxW+5, boxW+10);
        ctx.closePath();

        ctx.moveTo(maxX, maxY);
        ctx.lineTo(maxX-10, maxY-5);
        ctx.lineTo(maxX-10, maxY+5);
        ctx.closePath();

        ctx.fillStyle = '#0000ff';
        ctx.fill();
    }
    //绘制随机线
    function canvasOther(){
        ctx.beginPath();
        var count = (Math.random() * 1000) % 10 + 3; //随机数
        var pointsArr = [];
        //座标控制在boxW--maxX, boxW--maxY
        for (let i = 0; i < count; i++){
            var tempX = (Math.random() * 9999) % (maxX-boxW) + boxW;
            var tempY = (Math.random()*9999) % (maxY-boxW) + boxW;
            pointsArr.push({ x: tempX, y: tempY });
            if (i==0){
                ctx.moveTo(tempX, tempY)
            }
            else{
                ctx.lineTo(tempX, tempY);
            }
        }
        ctx.strokeStyle = 'red';
        ctx.stroke();

        //绘制矩形红点
        ctx.beginPath();
        ctx.fillStyle = 'red'
        for (let i = 0; i < count; i++){
            var tempObj = pointsArr[i];
            ctx.fillRect(tempObj.x-5, tempObj.y-5, 10, 10);
        }
    }
}