- 颜色标度的作用
- 数组分组
- 不同颜色对应不同数据
- 指定数据突出显示
- canvas
- 绘制折线图
<body>
<canvas id="canvas" width="600" height='500'></canvas>
</body>
<script>
var canvas = document.getElementById('canvas')
// 获取2d的上下文绘制环境
const ctx = canvas.getContext('2d')
ctx.beginPath()
// 设置起点
ctx.moveTo(100,100)
// 设置终点 中间点
ctx.lineTo(300,300)
ctx.lineTo(300,200)
// 设置样式
ctx.lineWidth= 4
ctx.strokeStyle="orange"
// 绘制
ctx.stroke()
ctx.closePath()
</script>
-
高清绘制
上述折线图 两端有点虚化，这是跟window.devicePixelRatio属性有关 比如： window.devicePixelRatio = 2，则此时如果上面是用100个像素绘制的，但是在屏幕里确实放在200个像素格里，把100个像素的内容，放在200个像素容器里面 因此看到的内容不会这么清晰，为了解决上述虚化问题
var canvas = document.getElementById('canvas')
// 获取2d的上下文绘制环境
const ctx = canvas.getContext('2d')
// 为了不模糊，高清
const getPixelRatio = () => {
return window.devicePixelRatio || 1
}
const ratio = getPixelRatio()
const oldWidth = canvas.width
const oldHeight = canvas.height
canvas.width = oldWidth * ratio
canvas.height = oldHeight * ratio
canvas.style.width = oldWidth + 'px'
canvas.style.height = oldHeight + 'px'
ctx.scale(ratio,ratio)
// 开始绘制
ctx.beginPath()
// 设置起点
ctx.moveTo(100,100)
// 设置终点 中间点
ctx.lineTo(300,300)
ctx.lineTo(300,200)
// 设置样式
ctx.lineWidth= 4
ctx.strokeStyle="orange"
// 绘制
ctx.stroke()
ctx.closePath()
- 绘制直角坐标系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
display: block;
margin: 10px auto 0;
border: 1px solid pink;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height='400'></canvas>
</body>
<script>
var canvas = document.getElementById('canvas')
// 获取2d的上下文绘制环境
const ctx = canvas.getContext('2d')
// 为了不模糊，高清
const getPixelRatio = () => {
return window.devicePixelRatio || 1
}
const ratio = getPixelRatio()
canvas.style.width = canvas.width + 'px'
canvas.style.height = canvas.height + 'px'
canvas.width = canvas.width * ratio
canvas.height = canvas.height * ratio
// 提前设置属性
const wd = canvas.clientWidth
const ht = canvas.clientHeight
console.log({ht});
const pad = 20
const bottomPad = 20
//开始绘制
ctx.beginPath()
ctx.lineWidth = 2
ctx.strokeStyle="lightblue"
//绘制坐标轴
ctx.moveTo(pad,pad)
ctx.lineTo(pad,ht * ratio - bottomPad)
ctx.lineTo(wd * ratio - pad,ht * ratio - bottomPad)
ctx.stroke()
ctx.closePath()
// 绘制x轴刻度
const step = 100
ctx.beginPath()
ctx.lineWidth = 1
ctx.strokeStyle = '#666'
for(var i= 1;i< Math.floor(wd * ratio / step); i ++) {
ctx.moveTo(pad + i * step,ht * ratio - bottomPad)
ctx.lineTo(pad + i * step,ht * ratio - bottomPad - 10)
}
ctx.stroke()
ctx.closePath()
// 绘制y轴刻度
ctx.beginPath()
ctx.lineWidth = 1
ctx.strokeStyle = '#666'
for(var j = 1;j < Math.floor(ht * ratio / step);j ++) {
ctx.moveTo(pad,ht * ratio - j * step - bottomPad)
ctx.lineTo(pad + 10,ht * ratio - j * step - bottomPad )
}
ctx.stroke()
ctx.closePath()
</script>
</html>
- 绘制矩形: 描边 + 填充 （描边其实就是线条）
// 绘制矩形: 描边 + 填充 （描边其实就是线条）, fill方法和stroke方法不能颠倒，不然边框颜色就会被淡化
ctx.beginPath()
ctx.lineWidth = 4
ctx.strokeStyle = 'orange' // 描边颜色
ctx.fillStyle = 'hotpink' // 填充颜色
ctx.rect(100,100,300,200)
ctx.fill() // 调用填充方法
ctx.stroke() // 调用描边方法
ctx.closePath()
- 绘制矩形 只需要描边,
ctx.beginPath()
ctx.lineWidth = 4
ctx.lineStyle="seagreen"
ctx.strokeRect(100,310,300,200)
ctx.stroke()
ctx.closePath()
- 绘制矩形 只需要填充
ctx.beginPath()
ctx.fillStyle = 'skyblue'
ctx.fillRect(410,310,300,200)
ctx.closePath()
- 绘制直方图
ctx.beginPath()
for (let i = 1; i < Math.floor(wd * ratio / step); i++) {
const height = Math.random() * 300 + 50
ctx.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)
ctx.fillRect(i * step,ht*ratio - bottomPad - height,40,height)
}
ctx.closePath()
- 绘制圆环
ctx.beginPath()
ctx.strokeStyle = 'orange'
ctx.lineWidth = 4
ctx.arc(400,300,200,0,Math.PI/4,true) // 400，300 代表圆心的位置，200 圆的路径，其实绘制角度是0，终点是Math*PI/4， false代表顺时针，true代表逆时针
ctx.stroke()
ctx.closePath()
- 绘制圆形
ctx.beginPath()
ctx.fillStyle = 'skyblue'
ctx.moveTo(400,300)
ctx.arc(400,300,100,0,Math.PI/4)
ctx.fill()
ctx.closePath()
- 绘制 饼状图
// 绘制饼状图
ctx.beginPath()
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.shadowBlur = 4
ctx.shadowColor="#333"
ctx.fillStyle= '#5C1918'
ctx.moveTo(400,300)
ctx.arc(400,300,100,-Math.PI/2,-Math.PI/4)
ctx.fill()
ctx.closePath()
ctx.beginPath()
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 0
ctx.shadowBlur = 4
ctx.shadowColor="#5C1918"
ctx.fillStyle= '#A32D29'
ctx.moveTo(400,300)
ctx.arc(400,300,110,-Math.PI/4,Math.PI/4)
ctx.fill()
ctx.closePath()
- 绘制文字
// 绘制居中线条
ctx.beginPath()
ctx.lineWidth = 1
ctx.strokeStyle = '#ccc'
ctx.moveTo(wd * ratio /2,0)
ctx.lineTo(wd * ratio /2,ht * ratio)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.lineWidth = 1
ctx.strokeStyle = '#ccc'
ctx.moveTo( 0,ht * ratio /2)
ctx.lineTo(wd * ratio ,ht * ratio/2)
ctx.stroke()
ctx.closePath()
// 实心文字，描边文字
ctx.fillStyle="orange"
ctx.strokeStyle = 'hotPink'
ctx.font="bold 60px 微软雅黑"
ctx.fillText('陈云',100,100,300) // 100,100代表x,y轴左边，300 代表字的最大宽度
ctx.strokeText('前端',100,230,300)
// 对齐设置
ctx.textAlign = 'center' //left start right end
ctx.textBaseline = 'top' //top bottom middle
ctx.fillText('陈云',450,300)
