canvas画布案例——1、心电图 2、绘制矩形——柱状图 3、挂钟 4、饼状图 5、评分空间——五角星 6、动图

本文链接：https://blog.csdn.net/qq_52301431/article/details/125938770

1、心电图

<!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></title>
</head>
<body>
    <style>
        #box {
            border: 1px solid black;
        }
    </style>
    <canvas id="box" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d") //context 上下文（代码）：用的技术是由底层实现的，我们写的是上层代码，直接调用，使用下层代码
        var arr = [50, 30, 40, 50, 52, 54, 57, 80, 42, 60,70,50,40,60,40]
        var x = 30   //用于后面绘制心电图x y值
        //让数组每一秒加一个元素
        setInterval(()=>{
            arr.push(Math.random()*(120-50)+50)   //代表取随机的人的心跳：范围：50-120
        },1000)
        setInterval(()=>{     // 让心电图动起来
            canvas.width=400  //清除画板
            x-=(30/(1000/30))   //让心电图等比例的动
            biaoge()
            zuobiao()
            xindian()
        },30)
        //绘制表格
        function biaoge() {
            ctx.beginPath()
            ctx.lineWidth = 1
            ctx.strokeStyle = "black"
            var m = 10
            for (var i = 0; i < parseInt(400 / m); i++) {
                //横线
                ctx.moveTo(0, i * m)
                ctx.lineTo(400, i * m)
                //竖线
                ctx.moveTo(i * m, 0)
                ctx.lineTo(i * m, 400)
            }
            ctx.stroke()
        }
        //绘制坐标
        function zuobiao() {
            ctx.beginPath()
            ctx.strokeStyle = "green"
            ctx.lineWidth = 1
            //x轴
            ctx.moveTo(20, 380)
            ctx.lineTo(20, 20)
            ctx.lineTo(10, 30)
            ctx.moveTo(20, 20)
            ctx.lineTo(30, 30)
            //y轴
            ctx.moveTo(20, 380)
            ctx.lineTo(380, 380)
            ctx.lineTo(370, 370)
            ctx.moveTo(380, 380)
            ctx.lineTo(370, 390)
            ctx.stroke()
        }
        //画心电图
        function xindian() {
            ctx.beginPath()
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 5
            for (var i = 0; i < arr.length; i++) {
                ctx.lineTo(i*30+x, 300 - arr[i])

            }
            ctx.stroke()
        }
    </script>
</body>
</html>

2、绘制矩形——柱状图

<!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>
</head>
<style>
    #box {
        border: 1px solid red
    }
</style>
<body>
    <canvas id="box" width="600" height="600"></canvas>
    <script>
        var canvas=document.querySelector("#box")
        var ctx=canvas.getContext("2d")
        var arr=[1000,800,799,789,699,540,799]
        ctx.lineTo(50,500)
        ctx.lineTo(580,500)
        ctx.stroke()
        var h=450/Math.max(...arr)   //450是整个柱状图最高的高度，除以数组中最大的数就是得到一个比例，后面每个柱状图就可以等比例的得到相应高度
        for(var i=0;i<arr.length;i++) {
            ctx.fillStyle="pink"
            ctx.fillRect(100+i*70,500-h*arr[i],50,h*arr[i])
            //x：100+i*70  100是距离左边100开始，然后每一个柱状图50宽度，20的间距，所以i*70
            // y:500-h*arr[y:i]  因为横线下面有100，上面就剩下500，用500-柱状图的高度=柱状图上面顶点的y轴
        }
    </script>
</body>
</html>

3、挂钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			#box {
				border: 1px gray solid;
			}
		</style>
		<canvas id="box" width="600" height="600"></canvas>
		<script>
			var canvas = document.querySelector("#box")
			var ctx = canvas.getContext("2d")
			var deg = Math.PI / 180
			function biaopan(){
				//画一个圆
				var r=200
				var y1=300
				var x1=300
				var kedu=10
				ctx.arc(x1, y1, r, 0, 360 * deg)
				//画圆中的刻度
				var startAnge=6;   //圆360度，分为60个刻度，每一格就是6度
				for(let i=0;i<60;i++){   //60是指表盘中有60个刻度
					let a;
					if(i%5){a=kedu}  //i%5如果为true，就代表它除不尽5，就是秒针最短的长度
					else{a=kedu*2}	 //等于false，就代表整点 1 2 3，就是长一点			
					var y2=y1+r*Math.sin(i*startAnge*deg)   //代表每一个刻度的y轴的值
					var x2=x1+r*Math.cos(i*startAnge*deg)
					var y3=y1+(r-a)*Math.sin(i*startAnge*deg)   //代表刻度长度从圆上面延申到圆内的y轴值
					var x3=x1+(r-a)*Math.cos(i*startAnge*deg)
					ctx.moveTo(x2,y2)  //将两个点连接起来，作为刻度
					ctx.lineTo(x3,y3)
				}			
				ctx.stroke()
			}
			//绘制表中 秒针、分针、时针
			function biaozhen(){
				var sh=160  //秒针的长度
				var hh=100  //时针的长度
				var mh=140  //分针的长度
				//思想：不管是秒针、分针、时针，盘上60个刻度都会走
				//一秒钟：秒针走6度，分针走6/60度，时针0.5/60度
				var s=new Date().getSeconds()//获取当前时间的秒数
				//秒针
				ctx.moveTo(300,300)
				var y4=300+sh*Math.sin(s*6*deg)  //算出当前秒数下，相对应的秒针的坐标
				var x4=300+sh*Math.cos(s*6*deg)
				ctx.lineTo(x4,y4)   //与圆心相连接
				//时针
				ctx.moveTo(300,300)
				var y5=300+hh*Math.sin(s*0.5/60*deg)
				var x5=300+hh*Math.cos(s*0.5/60*deg)
				ctx.lineTo(x5,y5)
				//分针
				ctx.moveTo(300,300)
				var y5=300+mh*Math.sin(s*6/60*deg)
				var x5=300+mh*Math.cos(s*6/60*deg)
				ctx.lineTo(x5,y5)
				ctx.stroke()
			}
			setInterval(()=>{
				canvas.width=canvas.width
				biaopan()
				biaozhen()
			},1000)
		</script>
	</body>
</html>

4、饼状图

<!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></title>
</head>
<body>
    <style>
        #box {
            border: 1px solid black;
        }
    </style>
    <canvas id="box" width="400" height="400"></canvas>

    <script>
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        var deg = Math.PI / 180
        //给出数据，算每一个物品花费的占比
        var arr = [{
            name: "衣服",
            money: 8000
        }, {
            name: "car",
            money: 2000
        }, {
            name: "food",
            money: 7000
        }, {
            name: "cash",
            money: 1000
        }, {
            name: "cash2",
            money: 5000
        }, {
            name: "cash3",
            money: 5400
        }]
        var total = 0
        var start = 45 //饼状图最开始的起点，可以随意设
        for (var i = 0; i < arr.length; i++) {
            total = total + arr[i].money //获取买所有物品的钱
        }
        arr.forEach((el) => {
            //给每一个闭合图形填充一个随机的颜色
            var r = parseInt(Math.random() * 255)
            var g = parseInt(Math.random() * 255)
            var b = parseInt(Math.random() * 255)
            ctx.fillStyle = `rgb(${r},${g},${b})`
            //开始画每一个板块的图形
            ctx.beginPath()
            var n = (el.money / total) * 360 //算出每一个钱占总数的比例，再乘以360，就得到相应的度数
            ctx.arc(200, 200, 100, start * deg, (start + n) * deg) //(start + n) * deg  这是每一个每一个板块距离饼状图起点位置的度数
            //绘制文本
            var tetxAngle = start + n / 2
            var leng = 130
            var x1 = 200
            var y1 = 200
            var y2 = y1 + leng * Math.sin( tetxAngle * deg) //代表每一个刻度的y轴的值
            var x2 = x1 + leng * Math.cos( tetxAngle * deg)
            ctx.fillText(el.name, x2, y2)
            //绘制扇形饼图
            start = start + n
            ctx.lineTo(200, 200) //画完曲线，就接着回到圆心
            ctx.fill()
            ctx.stroke()
        })
    </script>
</body>
</html>

5、评分空间——五角星

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			.rank {
				width: 400px;
				height: 50px;
				cursor: pointer;
			}
		</style>
		<h1>请给我五星好评哦</h1>
		<div class="rank"></div>
		<script>
			//画五角星
			Object.prototype.drawstar = function(x, y, r, color = "gray") {				
				this.beginPath()
				var deg = Math.PI / 180
				var startAngle = -90
				var arr = []
				for (var i = 0; i < 5; i++) {
					var point = {  //算出五角星 五个在圆上的点的坐标
						x: x + r * Math.cos((startAngle+i*72)*deg),  // 360/5=72度
						y: y + r * Math.sin((startAngle+i*72)* deg) 
					}
					arr.push(point)    //将每一个点放入到数组中
				}
				//024130  ==>五角星的五个点连线  按照顺序相连接成五角星
				this.moveTo(arr[0].x, arr[0].y)
				this.lineTo(arr[2].x, arr[2].y)
				this.lineTo(arr[4].x, arr[4].y)
				this.lineTo(arr[1].x, arr[1].y)
				this.lineTo(arr[3].x, arr[3].y)
				this.lineTo(arr[0].x, arr[0].y)
				this.fillStyle = color
				this.fill()
			}
			//判断鼠标在五角星的位置，让其变颜色
			Object.prototype.addrank = function(n=0,color="gray",activecolor="yellow") {
				var canvas = document.createElement("canvas")
				var ctx = canvas.getContext("2d")
				var r = this.offsetHeight   //盒子的高度   r是直径
				canvas.width = (this.offsetHeight + 5) * 5  //+5是五角星之间的间隔是5，*5是画五个五角星，需要五个宽度
				canvas.height = r  
				this.appendChild(canvas)  //this是下面的调用者rankdiv
				for (var i = 0; i < 5; i++) {
					if(i<n){  //将鼠标之前的五角星颜色变为黄色
						ctx.drawstar(r / 2 + r * i + 5, r / 2, r/2,activecolor)
					}else{  //将鼠标之后的五角星颜色变为黄色
						ctx.drawstar(r / 2 + r * i + 5, r / 2, r/2,color)
					}
				}
			}
		</script>
		<script>
			var rankdiv = document.querySelector(".rank")
			rankdiv.addrank()
			//判断鼠标的位置是第几个五角星
			rankdiv.onmousemove=function(e){
				var n=Math.ceil((e.pageX-this.offsetLeft)/(this.offsetHeight + 5))    //向上取整：比如3.5，就代表第四个五角星
				//(e.pageX-this.offsetLeft表示的是：鼠标距离左边页面的宽度- rankdiv距离左边页面的宽度=鼠标与rankdiv的距离
				//鼠标与rankdiv的距离来除以 每一个五角星的宽度（this.offsetHeight + 5）=就知道此鼠标在哪一个五角星上
				this.innerHTML=""   //先将页面置空
				this.addrank(n)
			}
		</script>
	</body>
</html>

6、动图

<!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></title>
</head>
<body>
    <style>
        #box {
            border: 1px solid black;
        }
    </style>
    <canvas id="box" width="600" height="600"></canvas>
    <script>
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        //加一个精灵图，让整个精灵图动起来
        var img3 = new Image()
        img3.src = "img/hui.PNG"     //图片宽高：807   84
        img3.onload = function () {
            var i = 80.7
            var n = 0
            setInterval(() => {
                n++
                n=n%10   //10代表的是 图片里有10个小图片
                ctx.clearRect(20,200,80,84)
                //cx cy cw ch (剪图片的大小:cx和cy代表从图片哪个位置开始，cw和ch是代表取多大)    
                // dx dy dw dh（显示到屏幕上的位置:dx和dy表示将图片放在屏幕哪里，dw和dh表示让在多大的盒子里）
                ctx.drawImage(img3, n*80.7, 0, 80.7, 84, 20, 200, 80.7, 84)
            },200)
        }
    </script>
</body>
</html>