devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家自动化 | 2024-02-18 10:44:11

赞

踩

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

目录

1、心电图

2、绘制矩形——柱状图

3、挂钟

4、饼状图

5、评分空间——五角星

6、动图

1、心电图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <style>
  11.         #box {
  12.             border: 1px solid black;
  13.         }
  14.     </style>
  15.     <canvas id="box" width="400px" height="400px"></canvas>
  16.     <script>
  17.         var canvas = document.querySelector("#box")
  18.         var ctx = canvas.getContext("2d") //context 上下文（代码）：用的技术是由底层实现的，我们写的是上层代码，直接调用，使用下层代码
  19.         var arr = [50, 30, 40, 50, 52, 54, 57, 80, 42, 60,70,50,40,60,40]
  20.         var x = 30   //用于后面绘制心电图x y值
  21.         //让数组每一秒加一个元素
  22.         setInterval(()=>{
  23.             arr.push(Math.random()*(120-50)+50)   //代表取随机的人的心跳：范围：50-120
  24.         },1000)
  25.         setInterval(()=>{     // 让心电图动起来
  26.             canvas.width=400  //清除画板
  27.             x-=(30/(1000/30))   //让心电图等比例的动
  28.             biaoge()
  29.             zuobiao()
  30.             xindian()
  31.         },30)
  32.         //绘制表格
  33.         function biaoge() {
  34.             ctx.beginPath()
  35.             ctx.lineWidth = 1
  36.             ctx.strokeStyle = "black"
  37.             var m = 10
  38.             for (var i = 0; i < parseInt(400 / m); i++) {
  39.                 //横线
  40.                 ctx.moveTo(0, i * m)
  41.                 ctx.lineTo(400, i * m)
  42.                 //竖线
  43.                 ctx.moveTo(i * m, 0)
  44.                 ctx.lineTo(i * m, 400)
  45.             }
  46.             ctx.stroke()
  47.         }
  48.         //绘制坐标
  49.         function zuobiao() {
  50.             ctx.beginPath()
  51.             ctx.strokeStyle = "green"
  52.             ctx.lineWidth = 1
  53.             //x轴
  54.             ctx.moveTo(20, 380)
  55.             ctx.lineTo(20, 20)
  56.             ctx.lineTo(10, 30)
  57.             ctx.moveTo(20, 20)
  58.             ctx.lineTo(30, 30)
  59.             //y轴
  60.             ctx.moveTo(20, 380)
  61.             ctx.lineTo(380, 380)
  62.             ctx.lineTo(370, 370)
  63.             ctx.moveTo(380, 380)
  64.             ctx.lineTo(370, 390)
  65.             ctx.stroke()
  66.         }
  67.         //画心电图
  68.         function xindian() {
  69.             ctx.beginPath()
  70.             ctx.strokeStyle = "blue"
  71.             ctx.lineWidth = 5
  72.             for (var i = 0; i < arr.length; i++) {
  73.                 ctx.lineTo(i*30+x, 300 - arr[i])
  74.  
  75.             }
  76.             ctx.stroke()
  77.         }
  78.     </script>
  79. </body>
  80. </html>

2、绘制矩形——柱状图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     #box {
  11.         border: 1px solid red
  12.     }
  13. </style>
  14. <body>
  15.     <canvas id="box" width="600" height="600"></canvas>
  16.     <script>
  17.         var canvas=document.querySelector("#box")
  18.         var ctx=canvas.getContext("2d")
  19.         var arr=[1000,800,799,789,699,540,799]
  20.         ctx.lineTo(50,500)
  21.         ctx.lineTo(580,500)
  22.         ctx.stroke()
  23.         var h=450/Math.max(...arr)   //450是整个柱状图最高的高度，除以数组中最大的数就是得到一个比例，后面每个柱状图就可以等比例的得到相应高度
  24.         for(var i=0;i<arr.length;i++) {
  25.             ctx.fillStyle="pink"
  26.             ctx.fillRect(100+i*70,500-h*arr[i],50,h*arr[i])
  27.             //x：100+i*70  100是距离左边100开始，然后每一个柱状图50宽度，20的间距，所以i*70
  28.             // y:500-h*arr[y:i]  因为横线下面有100，上面就剩下500，用500-柱状图的高度=柱状图上面顶点的y轴
  29.         }
  30.     </script>
  31. </body>
  32. </html>

3、挂钟

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<style>
  9. 			#box {
  10. 				border: 1px gray solid;
  11. 			}
  12. 		</style>
  13. 		<canvas id="box" width="600" height="600"></canvas>
  14. 		<script>
  15. 			var canvas = document.querySelector("#box")
  16. 			var ctx = canvas.getContext("2d")
  17. 			var deg = Math.PI / 180
  18. 			function biaopan(){
  19. 				//画一个圆
  20. 				var r=200
  21. 				var y1=300
  22. 				var x1=300
  23. 				var kedu=10
  24. 				ctx.arc(x1, y1, r, 0, 360 * deg)
  25. 				//画圆中的刻度
  26. 				var startAnge=6;   //圆360度，分为60个刻度，每一格就是6度
  27. 				for(let i=0;i<60;i++){   //60是指表盘中有60个刻度
  28. 					let a;
  29. 					if(i%5){a=kedu}  //i%5如果为true，就代表它除不尽5，就是秒针最短的长度
  30. 					else{a=kedu*2}	 //等于false，就代表整点 1 2 3，就是长一点			
  31. 					var y2=y1+r*Math.sin(i*startAnge*deg)   //代表每一个刻度的y轴的值
  32. 					var x2=x1+r*Math.cos(i*startAnge*deg)
  33. 					var y3=y1+(r-a)*Math.sin(i*startAnge*deg)   //代表刻度长度从圆上面延申到圆内的y轴值
  34. 					var x3=x1+(r-a)*Math.cos(i*startAnge*deg)
  35. 					ctx.moveTo(x2,y2)  //将两个点连接起来，作为刻度
  36. 					ctx.lineTo(x3,y3)
  37. 				}			
  38. 				ctx.stroke()
  39. 			}
  40. 			//绘制表中 秒针、分针、时针
  41. 			function biaozhen(){
  42. 				var sh=160  //秒针的长度
  43. 				var hh=100  //时针的长度
  44. 				var mh=140  //分针的长度
  45. 				//思想：不管是秒针、分针、时针，盘上60个刻度都会走
  46. 				//一秒钟：秒针走6度，分针走6/60度，时针0.5/60度
  47. 				var s=new Date().getSeconds()//获取当前时间的秒数
  48. 				//秒针
  49. 				ctx.moveTo(300,300)
  50. 				var y4=300+sh*Math.sin(s*6*deg)  //算出当前秒数下，相对应的秒针的坐标
  51. 				var x4=300+sh*Math.cos(s*6*deg)
  52. 				ctx.lineTo(x4,y4)   //与圆心相连接
  53. 				//时针
  54. 				ctx.moveTo(300,300)
  55. 				var y5=300+hh*Math.sin(s*0.5/60*deg)
  56. 				var x5=300+hh*Math.cos(s*0.5/60*deg)
  57. 				ctx.lineTo(x5,y5)
  58. 				//分针
  59. 				ctx.moveTo(300,300)
  60. 				var y5=300+mh*Math.sin(s*6/60*deg)
  61. 				var x5=300+mh*Math.cos(s*6/60*deg)
  62. 				ctx.lineTo(x5,y5)
  63. 				ctx.stroke()
  64. 			}
  65. 			setInterval(()=>{
  66. 				canvas.width=canvas.width
  67. 				biaopan()
  68. 				biaozhen()
  69. 			},1000)
  70. 		</script>
  71. 	</body>
  72. </html>

4、饼状图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <style>
  11.         #box {
  12.             border: 1px solid black;
  13.         }
  14.     </style>
  15.     <canvas id="box" width="400" height="400"></canvas>
  16.  
  17.     <script>
  18.         var canvas = document.querySelector("#box")
  19.         var ctx = canvas.getContext("2d")
  20.         var deg = Math.PI / 180
  21.         //给出数据，算每一个物品花费的占比
  22.         var arr = [{
  23.             name: "衣服",
  24.             money: 8000
  25.         }, {
  26.             name: "car",
  27.             money: 2000
  28.         }, {
  29.             name: "food",
  30.             money: 7000
  31.         }, {
  32.             name: "cash",
  33.             money: 1000
  34.         }, {
  35.             name: "cash2",
  36.             money: 5000
  37.         }, {
  38.             name: "cash3",
  39.             money: 5400
  40.         }]
  41.         var total = 0
  42.         var start = 45 //饼状图最开始的起点，可以随意设
  43.         for (var i = 0; i < arr.length; i++) {
  44.             total = total + arr[i].money //获取买所有物品的钱
  45.         }
  46.         arr.forEach((el) => {
  47.             //给每一个闭合图形填充一个随机的颜色
  48.             var r = parseInt(Math.random() * 255)
  49.             var g = parseInt(Math.random() * 255)
  50.             var b = parseInt(Math.random() * 255)
  51.             ctx.fillStyle = `rgb(${r},${g},${b})`
  52.             //开始画每一个板块的图形
  53.             ctx.beginPath()
  54.             var n = (el.money / total) * 360 //算出每一个钱占总数的比例，再乘以360，就得到相应的度数
  55.             ctx.arc(200, 200, 100, start * deg, (start + n) * deg) //(start + n) * deg  这是每一个每一个板块距离饼状图起点位置的度数
  56.             //绘制文本
  57.             var tetxAngle = start + n / 2
  58.             var leng = 130
  59.             var x1 = 200
  60.             var y1 = 200
  61.             var y2 = y1 + leng * Math.sin( tetxAngle * deg) //代表每一个刻度的y轴的值
  62.             var x2 = x1 + leng * Math.cos( tetxAngle * deg)
  63.             ctx.fillText(el.name, x2, y2)
  64.             //绘制扇形饼图
  65.             start = start + n
  66.             ctx.lineTo(200, 200) //画完曲线，就接着回到圆心
  67.             ctx.fill()
  68.             ctx.stroke()
  69.         })
  70.     </script>
  71. </body>
  72. </html>

5、评分空间——五角星

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<style>
  9. 			.rank {
  10. 				width: 400px;
  11. 				height: 50px;
  12. 				cursor: pointer;
  13. 			}
  14. 		</style>
  15. 		<h1>请给我五星好评哦</h1>
  16. 		<div class="rank"></div>
  17. 		<script>
  18. 			//画五角星
  19. 			Object.prototype.drawstar = function(x, y, r, color = "gray") {				
  20. 				this.beginPath()
  21. 				var deg = Math.PI / 180
  22. 				var startAngle = -90
  23. 				var arr = []
  24. 				for (var i = 0; i < 5; i++) {
  25. 					var point = {  //算出五角星 五个在圆上的点的坐标
  26. 						x: x + r * Math.cos((startAngle+i*72)*deg),  // 360/5=72度
  27. 						y: y + r * Math.sin((startAngle+i*72)* deg) 
  28. 					}
  29. 					arr.push(point)    //将每一个点放入到数组中
  30. 				}
  31. 				//024130  ==>五角星的五个点连线  按照顺序相连接成五角星
  32. 				this.moveTo(arr[0].x, arr[0].y)
  33. 				this.lineTo(arr[2].x, arr[2].y)
  34. 				this.lineTo(arr[4].x, arr[4].y)
  35. 				this.lineTo(arr[1].x, arr[1].y)
  36. 				this.lineTo(arr[3].x, arr[3].y)
  37. 				this.lineTo(arr[0].x, arr[0].y)
  38. 				this.fillStyle = color
  39. 				this.fill()
  40. 			}
  41. 			//判断鼠标在五角星的位置，让其变颜色
  42. 			Object.prototype.addrank = function(n=0,color="gray",activecolor="yellow") {
  43. 				var canvas = document.createElement("canvas")
  44. 				var ctx = canvas.getContext("2d")
  45. 				var r = this.offsetHeight   //盒子的高度   r是直径
  46. 				canvas.width = (this.offsetHeight + 5) * 5  //+5是五角星之间的间隔是5，*5是画五个五角星，需要五个宽度
  47. 				canvas.height = r  
  48. 				this.appendChild(canvas)  //this是下面的调用者rankdiv
  49. 				for (var i = 0; i < 5; i++) {
  50. 					if(i<n){  //将鼠标之前的五角星颜色变为黄色
  51. 						ctx.drawstar(r / 2 + r * i + 5, r / 2, r/2,activecolor)
  52. 					}else{  //将鼠标之后的五角星颜色变为黄色
  53. 						ctx.drawstar(r / 2 + r * i + 5, r / 2, r/2,color)
  54. 					}
  55. 				}
  56. 			}
  57. 		</script>
  58. 		<script>
  59. 			var rankdiv = document.querySelector(".rank")
  60. 			rankdiv.addrank()
  61. 			//判断鼠标的位置是第几个五角星
  62. 			rankdiv.onmousemove=function(e){
  63. 				var n=Math.ceil((e.pageX-this.offsetLeft)/(this.offsetHeight + 5))    //向上取整：比如3.5，就代表第四个五角星
  64. 				//(e.pageX-this.offsetLeft表示的是：鼠标距离左边页面的宽度- rankdiv距离左边页面的宽度=鼠标与rankdiv的距离
  65. 				//鼠标与rankdiv的距离来除以 每一个五角星的宽度（this.offsetHeight + 5）=就知道此鼠标在哪一个五角星上
  66. 				this.innerHTML=""   //先将页面置空
  67. 				this.addrank(n)
  68. 			}
  69. 		</script>
  70. 	</body>
  71. </html>

6、动图

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <style>
  11.         #box {
  12.             border: 1px solid black;
  13.         }
  14.     </style>
  15.     <canvas id="box" width="600" height="600"></canvas>
  16.     <script>
  17.         var canvas = document.querySelector("#box")
  18.         var ctx = canvas.getContext("2d")
  19.         //加一个精灵图，让整个精灵图动起来
  20.         var img3 = new Image()
  21.         img3.src = "img/hui.PNG"     //图片宽高：807   84
  22.         img3.onload = function () {
  23.             var i = 80.7
  24.             var n = 0
  25.             setInterval(() => {
  26.                 n++
  27.                 n=n%10   //10代表的是 图片里有10个小图片
  28.                 ctx.clearRect(20,200,80,84)
  29.                 //cx cy cw ch (剪图片的大小:cx和cy代表从图片哪个位置开始，cw和ch是代表取多大)    
  30.                 // dx dy dw dh（显示到屏幕上的位置:dx和dy表示将图片放在屏幕哪里，dw和dh表示让在多大的盒子里）
  31.                 ctx.drawImage(img3, n*80.7, 0, 80.7, 84, 20, 200, 80.7, 84)
  32.             },200)
  33.         }
  34.     </script>
  35. </body>
  36. </html>

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/107379?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号