canvas的使用以及案例

创建Canvas元素
向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度：

<canvas width="600" height="400"></canvas>

通过JavaScript来绘制

 //1. 获取节点
    var myCanvas = document.querySelector("canvas");
    //2.获取绘图工具箱-->即创建画笔
    var ctx = myCanvas.getContext("2d");
    //3.把画笔移动到起点
    ctx.moveTo(0, 0);
    //4.绘制直线-->画笔的终点
    ctx.lineTo(300, 50);
    //5.描边
    ctx.stroke();

Canvas的基本使用

• 描边 stroke()
• 填充 fill()

闭合路径

• 手动闭合
• 程序闭合 closePath()

开启新的路径 beginPath()

设置样式

• 画笔的状态
  • lineWidth 线宽，默认1px
  • lineCap 线末端类型：(butt默认)、round、square
  • lineJoin 相交线的拐点 miter(默认)、round、bevel
  • strokeStyle 线的颜色
  • fillStyle 填充颜色
  • setLineDash() 设置虚线
  • getLineDash() 获取虚线宽度集合
  • lineDashOffset 设置虚线偏移量（负值向右偏移）
  • setLineDash设置虚线

矩形绘制

• rect(x,y,w,h) 没有独立路径
• strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
• fillRect(x,y,w,h) 有独立路径，不影响别的绘制
• clearRect(x,y,w,h) 擦除矩形区域

案例：绘制三角形

 var ctx = document.querySelector("canvas").getContext('2d');
    //需求: 绘制三角形
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.lineTo(200, 200);
    // ctx.lineTo(100, 100);
    //自动闭合: 解决起始点和结束点无法完全闭合的缺角
    //关闭路径
    ctx.closePath();

    ctx.lineWidth = 20;
    //设置填充的颜色
    ctx.fillStyle = "pink";

    // ctx.stroke();
    //填充
    ctx.fill();

案例：镂空正方形

 //需求: 绘制镂空的正方形
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 300);
    ctx.closePath();

    ctx.moveTo(150, 150);
    ctx.lineTo(150, 250);
    ctx.lineTo(250, 250);
    ctx.lineTo(250, 150);
    ctx.closePath();

    ctx.fillStyle = "pink";
    ctx.fill();

在填充的时候遵循非零环绕规则

1. 冲这个区域拉一条直线
2. 看这条直线相交的轨迹
3. .如果顺时针 +1 ; 如果逆时针 -1
4. .把所有的值计算出来, 等于0 , 这个区域就不填充, 不等于0 , 就填充

案例：绘制渐变色

var ctx = document.querySelector("canvas").getContext('2d');
 ctx.lineWidth = 50;
 for(var i = 0 ; i <=255; i++){
        ctx.beginPath();
        ctx.moveTo(100+i, 100);
        ctx.lineTo(101+i, 100);
        ctx.strokeStyle = "rgb("+i+",0,0)";
        ctx.stroke();
    }

案例：绘制折线图（仿后台数据）

<canvas width="600" height="400" style="border: 1px solid #eee;"></canvas>
<script>
    //点的数据
    var data = [
        {x: 100, y: 100},
        {x: 200, y: 250},
        {x: 300, y: 300},
        {x: 400, y: 250},
        {x: 500, y: 300},
        {x: 550, y: 100}
    ]
    //1. 创建构造函数
    function LineCart() {
        //获取绘图工具
        this.ctx = document.querySelector("canvas").getContext("2d");
        //画布的大小
        this.w = this.ctx.canvas.width;
        this.h = this.ctx.canvas.height;
        //网格的大小
        this.gridSize = 10;
        //坐标系的间距
        this.space = 20;
        //坐标原点
        this.x0 = this.space;
        this.y0 = this.h - this.space;
        //箭头的大小
        this.arrowSize = 10;
        //绘制点的大小
        this.pointe = 6;
    }
    //2.在原型对象上添加方法
    //①初始化折线图
    LineCart.prototype.init = function () {
        this.drawGrid();
        this.drawAxis();
        this.drawPoint();
    }
    //②绘制网格
    LineCart.prototype.drawGrid = function () {
        var lineX = Math.floor(this.h / this.gridSize);
        for(var i = 0 ; i < lineX; i++){
            this.ctx.beginPath();
            this.ctx.moveTo(0, i * this.gridSize - 0.5);
            this.ctx.lineTo(this.w, i * this.gridSize - 0.5);
            this.ctx.strokeStyle = "#eee";
            this.ctx.stroke();
        }
        //3.画y轴方向的线
        var lineY = Math.floor(this.w / this.gridSize);
        for(var i = 0 ; i < lineY; i++){this.
            ctx.beginPath();
            this.ctx.moveTo(i * this.gridSize - 0.5, 0);
            this.ctx.lineTo(i * this.gridSize - 0.5, this.h);
            this.ctx.strokeStyle = "#eee";
            this.ctx.stroke();
        }
    }
    //③绘制坐标系
    LineCart.prototype.drawAxis = function () {
        //绘制x轴坐标系
        this.ctx.beginPath();
        this.ctx.strokeStyle = "#000";
        this.ctx.moveTo(this.x0,this.y0);
        this.ctx.lineTo(this.w - this.space, this.y0);
        //箭头
        this.ctx.lineTo(this.w - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
        this.ctx.lineTo(this.w - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
        this.ctx.lineTo(this.w - this.space, this.y0);
        this.ctx.fill();
        this.ctx.stroke();
        //绘制y轴坐标系
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(this.space, this.space);
        //箭头
        this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
        this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
        this.ctx.lineTo(this.space, this.space);
        this.ctx.fill();
        this.ctx.stroke();
    }
    //④绘制所有的点
    LineCart.prototype.drawPoint = function () {
        this.ctx.beginPath();
        this.ctx.moveTo(this.x0, this.y0);
        //把数据的坐标,转换成canvas坐标
        data.forEach(function (item, index) {
            //绘制点
            /* x = 原点的坐标 + 数据的坐标*/
            /* y = 原点的坐标 - 数据的坐标*/
            var canvasX = this.x0 + item.x;
            var canvasY = this.y0 - item.y;
            this.ctx.fillRect(canvasX - this.pointe / 2, canvasY - this.pointe / 2, this.pointe, this.pointe);
            //把线连接起来
            this.ctx.lineTo(canvasX, canvasY);
            this.ctx.stroke();
        }.bind(this));
    }
    //3.通过构造函数创建对象
    var lineChart = new LineCart();
    lineChart.init();
</script>