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>