HTML5----------canvas

canvas—专用于绘制2D图形/图像
在写canvas要运用的一个知识就是数学的坐标系

canvas 是什么？
是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。
如果需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制

canvas 能够做什么？
基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作

//如果你的浏览器不支持canvas会把这句话输出出来
<canvas width="600" height="500">
 
您的浏览器不支持canvas标签!
 
</canvas>

使用Chart.js在canvas上画统计图

<canvas id="c1" width="600" height="500"></canvas>
//引用chart.js
<script src="https://cdn.bootcss.com/Chart.js/3.0.0-alpha/Chart.js"></script>

<script>
		//获取2D画笔
        var ctx = document.getElementById('c1').getContext('2d');
        var myLineChart = new Chart(ctx, {
            type: 'bar',//7种
            data: {//数据集
                labels : ['销售员1', '销售员2','销售员3','销售员4','销售员5'],//x轴的说明文字
                datasets :[
                    {
                        label : '成绩表',
                        data : [Math.random() * 100 | 0, Math.random() * 100 | 0, Math.random() * 100 | 0, Math.random() * 100 | 0, Math.random() * 100 | 0],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                        ],
                        borderWidth: 1
                    },{
                        label : '成绩表',
                        data : [Math.random() * 100 | 0, Math.random() * 100 | 0, Math.random() * 100 | 0, Math.random() * 100 | 0, Math.random() * 100 | 0],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                        ],
                        type: 'line'
                    }
                ]
            },
            options: {
                responsive : false,//是否响应式布局
                scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true//坐标从开始
                            }
                        }]
                    }
                }            
        });
    </script>