使用canvas绘制直方图报表

最新推荐文章于 2022-08-22 17:25:14 发布
最新推荐文章于 2022-08-22 17:25:14 发布
阅读量584 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/shuaihong/blog/3041574
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" charset="utf-8"/>
    <title></title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
		<canvas id="canvas">	
		</canvas>
    </div>
    <script src="./diagram.js"></script>
    <script>
        var diagram = new Diagram();
        diagram.init(
          document.getElementById("canvas"),
          window.screen.width,
          window.screen.height * 2 / 5
        );

        var pm = [41, 12, 23, 21, 45, 78, 67],
          pmTop = [41, 12, 23, 21, 45, 78, 67],
          pmMin = 4,
          companyName = "厦门分公司",
          time = "2014-2-12",
          footer = ["4月23号", 4, 5, 6, 7, 8, 9];
        var list = [
          {
            hArr: pm,
            hArrTop: pmTop,
            title: "排名",
            subTitle: "最高排名：" + pmMin,
            rightTitle: companyName,
            rightSubTitle: time,
            footer: footer
          }
        ];
        diagram.histogram(list);
    </script>  
</body>
</html>
diagram.js文件
/**
 * methods列表：
 * ①init：初始化canvas
 * ②_resolveData：处理数据
 * drawFont：绘制文字
 * drawLine：绘制线条
 * drawBg：绘制背景
 * drawRoundRect：绘制弧形矩形
 * shadow：添加阴影
*/

var Diagram = function(){
	this.canvas = null;
	this.ctx = null;
	this.w = 0;
	this.h = 0;

	this.wWidth = document.body.clientWidth * 2;
	this.wHeight = document.body.clientHeight * 2;

	this.pos = []; //表格起始坐标位置，左下角,即背景图的位置
	this.tableMarginRightAndLeft = 10; //表格外侧距离，距离画布左侧的距离
	this.tableMarginTopAndBottom = 5;	//表格上下距离
	this.tablePaddingRightAndLeft = 20;	//表格内边距
	this.tablePaddingTopAndBottom = 20;
	//计算绘制区域大小，表格内容总宽，不包含外边距
	this.tableWidth = this.wWidth -this.tableMarginRightAndLeft*2; 
	this.tableHeight = this.wHeigh/3 - this.tableMarginTopAndBottom*2;	

	//表格内容总宽，不包含内外边距
	this.tableContentWidth = this.tableWidth-this.tablePaddingRightAndLeft*2; 
	this.tableContentHeight = this.tableHeight-this.tablePaddingTopAndBottom*2;

	this.data = null;//数据

	this.titleScale = 1/4; 	//表格三者占据的比例
	this.areaScale = 1/2;
	this.bottomScale = 1/7;
	
	this.iconType = "A";	//图表样式

}

Diagram.prototype.init = function(canvas,w,h,iconType){
	if(iconType){
		this.iconType = iconType;
	}
	this.canvas = canvas;
	this.ctx = canvas.getContext("2d");
	this.w = w*2;
	this.h = h*2;
	this.canvas.width = w*2;
	this.canvas.height = h*2;
	this.canvas.style.width = w + "px";
	this.canvas.style.height = h + "px";
};
// 绑定事件
Diagram.prototype.bindEvent = function(){

}
//获取数据
Diagram.prototype.fetchData = function(cb){

}
//处理数据 ——不太明白 ×××
Diagram.prototype._resolveData = function(data){ 
	var self = this;
	var num = data.length;//表格个数
	this.tableWidth = this.w - this.tableMarginRightAndLeft*2;	
	this.tableHeight = this.h/num - this.tableMarginTopAndBottom*2;
	this.tableContentWidth = this.tableWidth-this.tablePaddingRightAndLeft*2; 
	this.tableContentHeight = this.tableHeight-this.tablePaddingTopAndBottom*2;

	for(var i=0;i<num;i++){
		var max = Math.max.apply(this, data[i].hArr); // 取最大值
		max = max*1.2+1;
		data[i].hArr = data[i].hArr.map(function(item,index,arr){
			return self.areaScale*item/max*(self.tableContentHeight-self.w/25);
		});
		this.pos.push({
			x:this.tableMarginRightAndLeft,
			y:this.h/num*(i+1)-this.tableMarginTopAndBottom
		});
	}
	this.data = data;
}
//数据获取失败
Diagram.prototype._fetchDataFailed = function(){}

//绘制直方图
Diagram.prototype.histogram = function(data){
	if(!data){return}
	this._resolveData(data);//处理数据
	
	var iconType = this.iconType;
	var histogramStyle = this.histogramStyle;
	
	for(var i = 0;i<data.length;i++){	//绘制图表个数
		//绘制背景
		this.drawBg({
				x : this.pos[i].x,	//背景左下角坐标
				y : this.pos[i].y,
				w : this.tableWidth,	//宽高
				h : this.tableHeight
		},histogramStyle[iconType].bg);
		this.rectMatrix({
				hArr:this.data[i].hArr,	//直方图，柱形高度
				hArrTop:this.data[i].hArrTop,	//直方图，柱形上方显示字体
				pos:{//起始位置
					x:this.pos[i].x,
					y:this.pos[i].y- this.tablePaddingTopAndBottom - this.tableContentHeight*this.bottomScale
				}
			}, histogramStyle[iconType].rectMatrix);
		// //绘制线条，上
		this.drawLine({
				x : this.pos[i].x+this.tablePaddingRightAndLeft, 
				y : this.pos[i].y-this.tableHeight*(1-this.titleScale),
				endX : this.pos[i].x+this.tablePaddingRightAndLeft+this.tableContentWidth,
				endY : this.pos[i].y-this.tableHeight*(1-this.titleScale)
		}, histogramStyle[iconType].lineTop );
		//绘制线条，下
		this.drawLine({
				x : this.pos[i].x+this.tablePaddingRightAndLeft, 
				y : this.pos[i].y-this.tableContentHeight*this.bottomScale-this.tablePaddingTopAndBottom,
				endX :	this.pos[i].x+this.tablePaddingRightAndLeft+this.tableContentWidth,
				endY :	this.pos[i].y-this.tableContentHeight*this.bottomScale-this.tablePaddingTopAndBottom
		},	histogramStyle[iconType].lineBottom);
		//绘制底部菜单
		this.drawBottomBar({
				O:{
					x:this.pos[i].x+this.tablePaddingRightAndLeft,
					y:this.pos[i].y
				},
				tableWidth:this.tableContentWidth,
				footer:data[i].footer
		},histogramStyle[iconType].drawBottomBar);
		//绘制顶部部菜单		
		this.drawHeadBar({
				O:{
					x:this.pos[i].x+this.tablePaddingRightAndLeft,
					y:this.pos[i].y-this.tableHeight*(1-this.titleScale)
				},
				width:this.tableContentWidth,
				height: this.tableContentHeight,
				title:data[i].title || "",
				subTitle:data[i].subTitle || "",
				rightTitle:data[i].rightTitle || "",
				rightSubTitle:data[i].rightSubTitle || ""
		},	histogramStyle[iconType].drawHeadBar);
	}
};
/**
 * 绘制文字 √
 * options :x,y,font,color,textAlign,textBaseline,topFontSizePercent
 * */
Diagram.prototype.drawFont = function(options){
	this.ctx.save();
	this.ctx.fillStyle = options.color || "#fff";
	this.ctx.font = this.w * options.fontSizePercent +"px 宋体";
	this.ctx.textAlign = options.textAlign || "center";
	this.ctx.textBaseline = options.textBaseline ||"bottom";
	this.ctx.fillText(options.font,options.x,options.y);
	this.ctx.restore();
}

// 绘制背景 √
Diagram.prototype.drawBg = function(data,options){
	var x = data.x;
	var y = data.y;
	var w = data.w;
	var h = data.h;
	var bgColor1 = options.bgColor1;
	var bgColor2 = options.bgColor2;
	
	// 保存画笔状态
	this.ctx.save();
	// 线性渐变：（x,y,x1,y1）起点xy坐标，终点xy坐标
	var gradient = this.ctx.createLinearGradient(x+w/2, y, x+w/2, y-h);
	this.ctx.lineWidth="0";
	// 添加阴影的效果欠佳：去除
	// this.shadow(2,2,2,"rgba(255,214,206,0.5)"); 
	gradient.addColorStop(0,bgColor1);
	gradient.addColorStop(1,bgColor2);
	this.ctx.fillStyle = gradient;
	// 绘制弧形矩形
	this.drawRoundRect(x,y-h,w,h,10);

	this.ctx.fill();
	this.ctx.stroke();
}
/**
 * 绘制长方形矩阵 √
 * options:
 * lineWPercent:0.25,	//柱形宽度rectRadiusPercent: 0.5,
 * strokeStyle:"rgba(253,163,99,0.8)",	//柱形颜色
 * topFontColor:"#fff",	//柱形顶部文字颜色 
 * topFontSizePercent:1/25	//柱形顶部文字大小
*/
Diagram.prototype.rectMatrix = function(data,options){
	var ctx = this.ctx;
	
	var hArr = data.hArr;	//直方图，柱形高度
	var hArrTop = data.hArrTop;	//直方图，柱形上方显示字体
	var pos = data.pos;	//起始位置
	
	var lineWPercent = options.lineWPercent;	//柱形宽度
	var rectRadiusPercent = options.rectRadiusPercent;	//柱形圆角大小
	var strokeStyle = options.strokeStyle;	//柱形颜色
	var topFontColor = options.topFontColor;	//柱形顶部文字颜色
	var topFontSizePercent = options.topFontSizePercent;	//柱形顶部文字大小
	var isShadow = options.isShadow;
	
	var num = hArr.length;		//直方图，柱形个数
	
	var w = this.tableContentWidth/(num+num-1);
	var lineW = num == 1 ? w/3 : w*lineWPercent;	//柱形宽度
	var y = data.pos.y;	//柱形底部位置
	
	if(isShadow){
		ctx.save();
		ctx.shadowOffsetX = 5;	//绘制阴影
		ctx.shadowOffsetY = 5;
		ctx.shadowBlur = 4;
		ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
	}
	
	this.ctx.fillStyle =  strokeStyle;		//填充柱形,颜色
	for(var i=0; i<num; i++){	//绘制柱形
		var x = pos.x + this.tablePaddingRightAndLeft + this.tableContentWidth/num*(1/2+i);	
		this.drawRoundRect(x-lineW/2,y-hArr[i],lineW,hArr[i],lineW*rectRadiusPercent);
		this.ctx.fill();
		if(hArrTop){ 
			//options :x,y,font,color,textAlign,textBaseline,fontSizePercent
			this.drawFont({
				x : x,
				y : y-hArr[i]-10,
				font : hArrTop[i],
				color : topFontColor,
				fontSizePercent : topFontSizePercent
			});
		}//绘制文字
	}
	ctx.restore();
}

// 绘制线条 √
Diagram.prototype.drawLine = function(data,options){
	var x = data.x;
	var y = data.y;
	var endX = data.endX;
	var endY = data.endY;
	var offsetY = options.offsetY;
	var color = options.color  || "#ffa164";
	var lineWidth = options.lineWidth || 4 ;
	
	var ctx = this.ctx;
	ctx.save()
	ctx.strokeStyle = color;
	ctx.lineWidth = lineWidth;
	ctx.beginPath();
	ctx.moveTo(x, y + parseFloat(lineWidth) + parseFloat(offsetY) );
	ctx.lineTo(endX, endY + parseFloat(lineWidth) + parseFloat(offsetY) );
	ctx.stroke();
	ctx.closePath();
	ctx.restore();
}

// 绘制头部 √
Diagram.prototype.drawHeadBar = function(data,options){
	console.log(data,options)
	var fontColor = options.fontColor || "#fff";
	var O = data.O;

	var ctx = this.ctx;
	
	ctx.save();
	ctx.translate(O.x,O.y); // 想当与将画布移动到了header的左下角
	ctx.fillStyle = fontColor;
	
	ctx.textAlign = "start";
	ctx.textBaseline = "bottom";
	
	ctx.font = this.w/20+"px 宋体";
	ctx.fillText(data.title,0,-this.titleScale*data.height/2);
	ctx.font = this.w/25+"px 宋体";
	ctx.fillText(data.subTitle,0,-4);
	
	// 观察头部下方的位置
	// ctx.beginPath();
	// ctx.moveTo(0,0);
	// ctx.lineTo(this.tableContentWidth,0); 
	// ctx.stroke();

	ctx.textAlign = "end";
	ctx.font = this.w/22+"px 宋体";
	ctx.fillText(data.rightTitle,data.width,-this.titleScale*data.height/2);
	ctx.font = this.w/25+"px 宋体";
	ctx.fillText(data.rightSubTitle,data.width,-4);
	
	ctx.restore();
}

// 绘制下测样式 √
Diagram.prototype.drawBottomBar = function(data,options){
	var fontColor = options.fontColor || "#fff";
	var fontSizePercent = options.fontSizePercent || 0.04;
	
	this.ctx.fillStyle = fontColor;
	var arr = data.footer;
	this.ctx.font = this.w * fontSizePercent+"px 宋体";
	this.ctx.textAlign = "center";
	this.ctx.textBaseline = "center";
	
	// 观察底部的上方位置
	// this.ctx.beginPath();
	// this.ctx.moveTo(data.O.x,data.O.y-this.tableContentHeight*this.bottomScale/3-this.tablePaddingTopAndBottom);
	// this.ctx.strokeStyle = "green";
	// this.ctx.lineTo(this.tableContentWidth,data.O.y-this.tableContentHeight*this.bottomScale/3-this.tablePaddingTopAndBottom); 
	// this.ctx.stroke();
	
	for(var i=0;i<arr.length;i++){
		// 从中间点绘制,居中
		this.ctx.fillText(arr[i],  data.O.x+data.tableWidth/arr.length*(1/2+i),  data.O.y-this.tableContentHeight*this.bottomScale/3-this.tablePaddingTopAndBottom)
	}
}

// 渲染数据
Diagram.prototype.renderData = function(data){

}

// 添加阴影 √
Diagram.prototype.shadow = function(shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor){
	this.ctx.shadowOffsetX = shadowOffsetX || 5;//阴影
	this.ctx.shadowOffsetY = shadowOffsetY || 5;
	this.ctx.shadowBlur = shadowBlur || 4;
	this.ctx.shadowColor = shadowColor || "rgba(0, 0, 0, 0.2)";
}
// 绘制弧形矩形 √
Diagram.prototype.drawRoundRect = function(x, y, width, height, radius){  
	var ctx = this.ctx; 
    ctx.beginPath();   
    ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
    ctx.lineTo(width - radius + x, y);   
    ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
    ctx.lineTo(width + x, height + y - radius);   
    ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
    ctx.lineTo(radius + x, height +y);   
    ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
    ctx.closePath();   

} 

//直方图样式 √
Diagram.prototype.histogramStyle = {
		A:{
			bg:{
				bgColor1:"#fd4135",	//背景颜色
				bgColor2:"#fe9150"
			},
			rectMatrix:{
				lineWPercent:0.25,	//柱形宽度,百分比
				rectRadiusPercent: 0.5,	//柱形圆角大小
				strokeStyle:"rgba(253,163,99,0.8)",	//柱形颜色
				topFontColor:"#fff",	//柱形顶部文字颜色
				topFontSizePercent:1/25,	//柱形顶部文字大小
				isShadow: true
			},
			lineTop:{
				color: "#ffcd86",		//线颜色
				lineWidth: "2",		//线宽度
				offsetY: "8"	//offsetY在y上偏移
			},
			lineBottom:{
				color :	"#ff7156",
				lineWidth : "4",
				offsetY : "8"
			},
			drawBottomBar:{
				fontColor:"#fff",	//脚部文字颜色
				fontSizePercent: 1/25	//脚部文字大小
			},
			drawHeadBar:{
				fontColor:"#fff"	//顶部文字颜色
			}
		},
		B:{
			bg:{
				bgColor1:"#a3d9e5",	//背景颜色
				bgColor2:"#a3d9e5"
			},
			rectMatrix:{
				lineWPercent:1,	//柱形宽度,百分比
				rectRadiusPercent: 0,	//柱形圆角大小
				strokeStyle:"#f6af3b",	//柱形颜色
				topFontColor:"black",	//柱形顶部文字颜色
				topFontSizePercent:1/25,	//柱形顶部文字大小
				isShadow: false
				
			},
			lineTop:{
				color: "#a3d9e5",		//线颜色
				lineWidth: "0",		//线宽度
				offsetY: "0"		//offsetY在y上偏移
			},
			lineBottom:{
				color :	"black",
				lineWidth : "1",
				offsetY : "1"
			},
			drawBottomBar:{
				fontColor:"black",	//脚部文字颜色
				fontSizePercent: 1/30	//脚部文字大小
			},
			drawHeadBar:{
				fontColor:"black"	//顶部文字颜色
			}
		}
}

//设置diagram样式
Diagram.prototype.set = function(options){
	var histogram = options.histogram;
	var iconType = options.iconType;
	if(iconType){
		this.iconType = iconType;
	}
	if(options.tablePaddingTopAndBottom){	
		this.tablePaddingTopAndBottom = options.tablePaddingTopAndBottom	;
	}
	if(histogram){
		for(item in histogram){
			this[item] = histogram[item];
		}
	}
	
}
效果图

转载于:https://my.oschina.net/shuaihong/blog/3041574

weixin_34237596
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECG html canvas绘制心电图
08-22
ECG html canvas绘制心电图
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
web前端开发
03-08 7007
来源 |https://segmentfault.com/a/11900000189938331、前言1.1 、业务场景图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并...
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能 把pagex转化为offsetx
weixin_52633842的博客
05-06 4023
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能
数据可视化 -- canvas基本使用
weixin_50983325的博客
10-21 957
canvas绘制线条 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() ctx.lineWidth = 4 ctx.strokeStyle = 'orange' // 起点 终点 中间点 ctx.moveTo(100, 100) ctx.lineTo(300, 300) ctx.lineTo(500, 200) ctx.stroke() ctx.clo
vue2 使用 html2Canvas 和 canvg 生成图片案例
不怕麻烦的鹿丸的博客
07-13 3302
html2canvas 将页面保存在canvas进行图片保存 canvg 将页面中的svg转化为canvas1.1 启动canvg引擎有三种方式，分别是from和fromString的区别是from需要传入的是svg本身，而fromString需要传入的是svg的字符串形式。这三种方式都可以传入三个参数，第一个参数是canvas画布的绘制上下文，第二个是需要绘制的svg，第三个是自定义配置选项，可以用于控制画布的渲染结果。1.2 canvg启动渲染的方法有两种：、。区别是当需要绘制的svg是动态图时，只会绘
Vue获取图片的三合一直方图
一天不学习，就浑身难受
06-17 933
vue获取图片的RGB直方图
vue使用canvas画布记录
weixin_45122482的博客
08-22 1473
canvas画布记录
html5使用canvas绘制一张图片
01-21
<canvas id=canvas width=600 height=500 xss=removed></canvas>  复制代码代码如下: var canvas=document.getElementById(“canvas”); var cxt=canvas.getContext(“2d”); var img=new Image(); img.src=”cat....
canvas绘制动态心电图
05-08
canvas绘制动态心电图，和监护仪上的一样，可参考使用！
Vue+Canvas绘图使用
热门推荐
qq_42112846的博客
03-10 2万+
1、前言 图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。 2、 实现原理 2.1、 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-...
vue使用Canvas
m0_63466615的博客
07-14 1万+
2.样式区（style区） canvas实际上是一个内联元素，要设置它在页面水平居中，需要把它设置为块级元素，（再次声明，不可以在css里设置canvas的宽高） 3.脚本区(script区) （1）获得canvas 两个的区别就是，用ref找到的canvas使用时需要使用canvas.value, 而document.querySelector找到的canvas使用时不需要加.value （3）画线（两
JavaScript - 基于 Canvas 绘制直方图
qq_29761395的博客
06-11 535
文章目录参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas - Histogram</title> <style type="text/css"> * { /* margin: 0; paddi
canvas 绘制多个方框【基于vue】
rice__pudding的博客
09-13 1347
1.dom <canvas width="640" height="480" id="paint_canvas" ref="paint_canvas" @mousedown.left="leftMouseClick($event)" @mousemove="mouseMovePaint($event)" @mouseup="mouseUpPaint($event)" ></canvas> 2.methods /** * 监听鼠标按键 获
HTML5项目笔记9：HTML5 Canvas 的图表报表开发
weixin_30475039的博客
09-02 122
我们前面所涉及的离线数据库、离线文件的操作，会话机制的控制，以及客户端跨域数据同步、与服务端的交互，都可以很好的让用户在没有网络或者与服务端断开链接的情况下进行正常的操作。但我们的这个离线系统的客户中包含了很多的特定群体，如财务，会计、数据抽取人员，于是需要对数据报表和数据图表一个很强有力支持，让他们更加直观地表达。 目前来说，图表的开发组件还是很多的。 有基于silverLight的...
ECharts官方教程(十四)【使用 Canvas 或者 SVG 渲染】
极客神殿
12-19 2万+
使用 Canvas 或者 SVG 渲染浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 ECharts v3.8 发布了 S
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
weixin_34061793的博客
06-04 353
Chart.js 是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。可以绘制柱状图、热点图、曲线图等，使用HTML5中的Canvas画布，支持原生的和jQuery的调用方法。特点6种图表类型Chart.js帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。基于HTML5Chart.js基于HTML5 canvas技术，支持所有...
在canvas上绘制3d图形
Annanljz
06-26 5944
项目简介 文章里有相当多的用到中学数学中的知识，推导3d的几何模型是如何绘制到2d平面中去的，最终利用推导出的结论编写代码，实现一个波纹的demo 项目地址：https://github.com/zz632893783/canvas-3d 安装项目依赖模块 npm install 运行项目 npm run dev 从z轴观察yz平面上的点 想象一下有这么一个三维空间（如图），有一个点B，我们从A点观察B点。那么B点在xy平面上的投影即AB的延长线与平面xy的交点C。..
html5项目报告,HTML5项目笔记9：HTML5 Canvas 的图表报表开发
weixin_39814393的博客
06-15 160
//Ben HTML5 1.0//Create By Ben 2012.5.25//基于zingchart图表插件的二级封装function BenCharts() {/*饼图*//*title：标题*//*fields:域*//*values：值*/this.makePieChart =function(title, fields, values) {var content= newArray(...
JavaScript中使用Canvas绘制YUV420图像
最新发布
07-08
在JavaScript中使用Canvas绘制YUV420图像是一个相对复杂的任务，因为Canvas默认使用RGB颜色模式而不是YUV。你需要进行一些额外的步骤来将YUV420数据转换为RGB，并将其绘制到Canvas上。 下面是一个基本的示例代码，用于展示如何使用Canvas绘制YUV420图像： ```html <!DOCTYPE html> <html> <head> <title>Canvas YUV420</title> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> <script> // 获取Canvas元素 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 获取YUV420图像的Y、U、V分量数据（假设已经获取到了） // 假设Y分量数据为yData，U分量数据为uData，V分量数据为vData // 创建一个ImageData对象用于存储RGB数据 var imageData = ctx.createImageData(canvas.width, canvas.height); var data = imageData.data; // YUV420转RGB函数 function yuv420ToRgb(y, u, v) { var r, g, b; // YUV到RGB转换公式 r = y + 1.402 * (v - 128); g = y - 0.344136 * (u - 128) - 0.714136 * (v - 128); b = y + 1.772 * (u - 128); // 将RGB值限制在0到255之间 r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b)); return [r, g, b]; } // 遍历每个像素 for (var i = 0; i < canvas.width * canvas.height; i++) { var y = yData[i]; var u = uData[Math.floor(i / 4)]; var v = vData[Math.floor(i / 4)]; // 转换YUV到RGB var rgb = yuv420ToRgb(y, u, v); // 填充RGB值到ImageData var dataIndex = i * 4; data[dataIndex] = rgb[0]; // 红色通道 data[dataIndex + 1] = rgb[1]; // 绿色通道 data[dataIndex + 2] = rgb[2]; // 蓝色通道 data[dataIndex + 3] = 255; // 不透明度 } // 将ImageData对象绘制到Canvas上 ctx.putImageData(imageData, 0, 0); </script> </body> </html> ``` 在上面的示例中，我们假设已经获取到了YUV420图像的Y、U、V分量数据，并创建了一个ImageData对象来存储RGB数据。然后，我们使用一个yuv420ToRgb函数将YUV数据转换为RGB，并将转换后的RGB值填充到ImageData对象中。最后，我们使用putImageData方法将ImageData对象绘制到Canvas上。 请注意，上述示例是一个简化的版本，并未考虑YUV420图像的具体格式和数据排列。在实际应用中，你可能需要根据实际情况进行适当的解析和处理。此外，由于JavaScript是单线程的，处理大量像素数据可能会导致性能问题，你可能需要考虑使用Web Worker或其他优化技术来提高性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值