D3临摹作业_Canvas (西安交大国家艺术基金数据可视化培训第26天)

最新推荐文章于 2024-04-10 17:07:12 发布
最新推荐文章于 2024-04-10 17:07:12 发布
阅读量603 收藏 1
点赞数
分类专栏： ASM 文章标签： D3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fox541/article/details/95979266
版权

第十章 Canvas 与简单图像处理

第一节 Canvas功能概述

一 Canvas与SVG的区别

 定义特征代码[W3school]
Canvas

通过 JavaScript 来绘制 2D 图形。是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

逐像素进行渲染的。

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

SVG

使用 XML 描述 2D 图形的语言。

SVG 基于 XML，SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事件处理器。
每个被绘制的图形均被视为对象。如果 SVG对象的属性发生变化，那么浏览器能够自动重现图形。

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序
复杂度高会减慢渲染速度
不适合游戏应用		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

二 Canvas标签和属性

JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");

然后，创建 context 对象：
var cxt=c.getContext("2d"); 

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。


案例：简单的圆[源码]

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

案例：Canvas绘制直方图[源码]

<html>
<head>
		<title>简单的直方图</title>
	</head>
	<body>
	   
		<canvas id="myCanvas" width="1200" height="700"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var n=10;
			var x=100,y=500
			for(var i=0;i<n;i++){
			    var h=Math.floor(Math.random()*y);
				cxt.fillStyle="#0000FF";
				cxt.fillRect(i*(x+10),y-h,x,h);
			}			
		</script>	
</body>
</html>



三 Canvas加载图像

案例：canvas加载图像[源码]

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);

</script>

</body>
</html>

第二节 Canvas基本图像处理

 Canvas图像操作API与处理流程

  代码
创建canvas<canvas> 
canvas上下文ctx=c.getContext("2d") 
绘制原图ctx.drawImage(image,0,0) 
获取像素数组idata=ctx.getImageData(0,0,w,h) 
分通道处理  
重写图像数据ctx.putImageData(img,0,0) 
导出图像toDataURL() 

案例 图像负片[源码]


<html>
	<body>
	<center>
	    <h2>数据可视化之JS Canvas 图像处理</h2>
		<button id="invert" color="blue">翻转</button>
		<hr width=70%></hr>
		<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var img=new Image()
			img.src="flowerS.jpg"
			cxt.drawImage(img,0,0);
			var imageData = cxt.getImageData(0,0,c.width, c.height);
			var data = imageData.data;
				
		    var invert = function() {
				for (var i = 0; i < data.length; i += 4) {
				  data[i]     = 255 - data[i];     // red
				  data[i + 1] = 255 - data[i + 1]; // green
				  data[i + 2] = 255 - data[i + 2]; // blue
				}			
			cxt.putImageData(imageData,0,0);
			}
			
			var invertbtn = document.getElementById('invert');
			invertbtn.addEventListener('click', invert);
			
		</script>
		</center>
	</body>
</html>

案例 灰度图像[源码]


<html>
	<body>
	<center>
	    <h2>数据可视化之JS Canvas 图像处理</h2>
		<button id="gray">灰度图</button>
		<hr width=70%></hr>
		<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var img=new Image()
			img.src="flowerS.jpg"
			cxt.drawImage(img,0,0);
			var imageData = cxt.getImageData(0,0,c.width, c.height);
			var data = imageData.data;
			var grayScale = function() {
				for (var i = 0; i < data.length; i += 4) {
				  var avg = (data[i] + data[i +1] + data[i +2]) / 3;
				  data[i]     = avg; // red
				  data[i + 1] = avg; // green
				  data[i + 2] = avg; // blue
				}			
				cxt.putImageData(imageData, 0, 0);
			};			
			var grayBtn = document.getElementById('gray');
			grayBtn.addEventListener('click',grayScale);			
		</script>
		</center>
	</body>
</html>

案例 图像二值化[源码]


<html>
	<body>
	<center>
	    <h2>数据可视化之JS Canvas 图像处理</h2>
		<button id="bin">二值图</button>
		<hr width=70%></hr>
		<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var img=new Image()
			img.src="flowerS.jpg"
			cxt.drawImage(img,0,0);
			var imageData = cxt.getImageData(0,0,c.width, c.height);
			var data = imageData.data;
			var binImage = function() {
				for (var i = 0; i < data.length; i += 4) {			
				  var gray=Math.floor(imageData.data[i]*0.3+imageData.data[i+1]*0.59+imageData.data[i+2]*0.11);			
				  if(gray<100)
					{
						data[i]     =0; // red
						data[i + 1] =0; // green
						data[i + 2] =0; // blue
							//console.log(gray);
					}
					else
					{
						data[i]     =255; // red
						data[i + 1] =255; // green
						data[i + 2] =255; // blue
					}
				}			
				cxt.putImageData(imageData, 0, 0);
			};			
			var binBtn = document.getElementById('bin');
			binBtn.addEventListener('click',binImage);			
		</script>
		</center>
	</body>
</html>

第三节 Canvas复杂图像处理

 

 

案例 水平翻转[源码]


<html>
	<body>
	<center>
	    <h2>数据可视化之JS Canvas 图像处理</h2>
		<button id="flip">水平翻转</button>
		<hr width=70%></hr>
		<canvas id="myCanvas" width="600" height="400"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var img=new Image()
			img.src="flowerS.jpg"
			cxt.drawImage(img,0,0);
			var imageData = cxt.getImageData(0,0,c.width, c.height);
			var data = imageData.data;
			//dataMatrix
			var DM=new Array(c.height);
			for(var i=0;i<c.height;i++){
					DM[i]=new Array(c.width);
					for(var j=0;j<c.width;j++){
						DM[i][j]=new Array(4);
						DM[i][j][0]=data[(i*(c.width)+j)*4];
						DM[i][j][1]=data[(i*(c.width)+j)*4+1];
						DM[i][j][2]=data[(i*(c.width)+j)*4+2];
						DM[i][j][3]=data[(i*(c.width)+j)*4+3];
					}
			}
			var flipImage = function() {				
				//水平翻转
				var tempPix
				for(var i=0;i<c.height;i++){				
					for(var j=0;j<c.width;j++){
					  if((i>0)&&(i<c.height-1)&&(j>0)&&(j<c.width-1)){	
							if(j<c.width/2)
							{
							  for(var k=0;k<4;k++){
								tempPix=DM[i][j][k];
								DM[i][j][k]=DM[i][c.width-1-j][k];
								DM[i][c.width-1-j][k]=tempPix;
							  }
							}					  
						}
					}
				}
				for(var i=0;i<c.height;i++){					
					for(var j=0;j<c.width;j++){					
						data[(i*(c.width)+j)*4]=DM[i][j][0];
						data[(i*(c.width)+j)*4+1]=DM[i][j][1];
						data[(i*(c.width)+j)*4+2]=DM[i][j][2];	
                        data[(i*(c.width)+j)*4+3]=DM[i][j][3];						
					}
				}
				cxt.putImageData(imageData, 0, 0);
			};			
			var flipBtn = document.getElementById('flip');
			flipBtn.addEventListener('click',flipImage);			
		</script>
		</center>
	</body>
</html>

案例： 柔化效果[源码]


<html>
	<body>
	<center>
	    <h2>数据可视化之JS Canvas 图像处理</h2>
		<button id="blur">柔化</button>
		<hr width=70%></hr>
		<canvas id="myCanvas" width="600" height="400"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var img=new Image()
			img.src="flowerS.jpg"
			cxt.drawImage(img,0,0);
			var imageData = cxt.getImageData(0,0,c.width, c.height);
			var data = imageData.data;
			//dataMatrix
			var DM=new Array(c.height);
			for(var i=0;i<c.height;i++){
					DM[i]=new Array(c.width);
					for(var j=0;j<c.width;j++){
						DM[i][j]=new Array(4);
						DM[i][j][0]=data[(i*(c.width)+j)*4];
						DM[i][j][1]=data[(i*(c.width)+j)*4+1];
						DM[i][j][2]=data[(i*(c.width)+j)*4+2];
						DM[i][j][3]=data[(i*(c.width)+j)*4+3];
					}
			}
			var blurImage = function() {				
				//9宫格平均，实现柔化Blur
				for(var i=0;i<c.height;i++){				
					for(var j=0;j<c.width;j++){
					  if((i>0)&&(i<c.height-1)&&(j>0)&&(j<c.width-1)){				  
						DM[i][j][0]=(DM[i-1][j-1][0]+DM[i-1][j][0]+DM[i-1][j+1][0]+DM[i][j-1][0]+DM[i][j][0]+DM[i][j+1][0]+DM[i+1][j-1][0]+DM[i+1][j][0]+DM[i+1][j+1][0])/9;
						DM[i][j][1]=(DM[i-1][j-1][1]+DM[i-1][j][1]+DM[i-1][j+1][1]+DM[i][j-1][1]+DM[i][j][1]+DM[i][j+1][1]+DM[i+1][j-1][1]+DM[i+1][j][1]+DM[i+1][j+1][1])/9;
						DM[i][j][2]=(DM[i-1][j-1][2]+DM[i-1][j][2]+DM[i-1][j+1][2]+DM[i][j-1][2]+DM[i][j][2]+DM[i][j+1][2]+DM[i+1][j-1][2]+DM[i+1][j][2]+DM[i+1][j+1][2])/9;
						}
					}
				}
				for(var i=0;i<c.height;i++){					
					for(var j=0;j<c.width;j++){					
						data[(i*(c.width)+j)*4]=DM[i][j][0];
						data[(i*(c.width)+j)*4+1]=DM[i][j][1];
						data[(i*(c.width)+j)*4+2]=DM[i][j][2];	
                        data[(i*(c.width)+j)*4+3]=DM[i][j][3];						
					}
				}
				cxt.putImageData(imageData, 0, 0);
			};			
			var blurBtn = document.getElementById('blur');
			blurBtn.addEventListener('click',blurImage);			
		</script>
		</center>
	</body>
</html>

案例： 锐化效果[源码]


<html>
	<body>
	<center>
	    <h2>数据可视化之JS Canvas 图像处理</h2>
		<button id="sharpen">锐化</button>
		<hr width=70%></hr>
		<canvas id="myCanvas" width="600" height="400"></canvas>
		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var img=new Image()
			img.src="flowerS.jpg"
			cxt.drawImage(img,0,0);
			var imageData = cxt.getImageData(0,0,c.width, c.height);
			var data = imageData.data;
			//dataMatrix
			var DM=new Array(c.height);
			for(var i=0;i<c.height;i++){
					DM[i]=new Array(c.width);
					for(var j=0;j<c.width;j++){
						DM[i][j]=new Array(4);
						DM[i][j][0]=data[(i*(c.width)+j)*4];
						DM[i][j][1]=data[(i*(c.width)+j)*4+1];
						DM[i][j][2]=data[(i*(c.width)+j)*4+2];
						DM[i][j][3]=data[(i*(c.width)+j)*4+3];
					}
			}
			var sharpenImage = function() {				
				//9宫格平均，实现柔化Blur
				for(var i=0;i<c.height;i++){				
					for(var j=0;j<c.width;j++){
					  if((i>0)&&(i<c.height-1)&&(j>0)&&(j<c.width-1)){				  
						DM[i][j][0]=(DM[i-1][j-1][0]*0-DM[i-1][j][0]+DM[i-1][j+1][0]*0-DM[i][j-1][0]+DM[i][j][0]*10-DM[i][j+1][0]+DM[i+1][j-1][0]*0-DM[i+1][j][0]+DM[i+1][j+1][0]*0)/6;
						DM[i][j][1]=(DM[i-1][j-1][1]*0-DM[i-1][j][1]+DM[i-1][j+1][1]*0-DM[i][j-1][1]+DM[i][j][1]*10-DM[i][j+1][1]+DM[i+1][j-1][1]*0-DM[i+1][j][1]+DM[i+1][j+1][1]*0)/6;
						DM[i][j][2]=(DM[i-1][j-1][2]*0-DM[i-1][j][2]+DM[i-1][j+1][2]*0-DM[i][j-1][2]+DM[i][j][2]*10-DM[i][j+1][2]+DM[i+1][j-1][2]*0-DM[i+1][j][2]+DM[i+1][j+1][2]*0)/6;
						}
					}
				}
				for(var i=0;i<c.height;i++){					
					for(var j=0;j<c.width;j++){					
						data[(i*(c.width)+j)*4]=DM[i][j][0];
						data[(i*(c.width)+j)*4+1]=DM[i][j][1];
						data[(i*(c.width)+j)*4+2]=DM[i][j][2];	
                        data[(i*(c.width)+j)*4+3]=DM[i][j][3];						
					}
				}
				cxt.putImageData(imageData, 0, 0);
			};			
			var sharpenBtn = document.getElementById('sharpen');
			sharpenBtn.addEventListener('click',sharpenImage);			
		</script>
		</center>
	</body>
</html>

更多的canvas

fox541
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3 canvas_D3和Canvas分3个步骤
cumi6497的博客
07-14 1348
d3 canvasby lars verspohl 由拉斯·韦斯波尔 D3和Canvas分3个步骤 (D3 and Canvas in 3 steps) 绑定，平局和互​​动 (The bind, the draw and the interactivity) Let’s say you’re building a data visualization using D3 and SVG. Y...
d3-canvas:d3.js 的画布渲染助手
06-12
d3.js 画布 用于渲染到 HTML5 画布的 d3.js 插件。 用法 D3 是关于将数据绑定到元素。 但是，与 SVG 不同的是，canvas 是由 JavaScript API 驱动的，而不是由 DOM 元素驱动的。 d3.canvas.line（和径向） var data = [ [ 0 , 1 ] , [ 1 , 1 ] , [ 2 , 2 ] , [ 3 , 3 ] , [ 4 , 5 ] ] , line ; // the svg way line = d3 . svg . line ( ) ; d3 . select ( 'path' ) . datum ( data ) . attr ( 'd' , line ) ; // using d3.canvas line = d3 . canvas . line ( ) ; d3 . select ( 'canvas' )
D3JS 画布缩放与平移（修改d3默认事件(进阶)：按住轮滑为平移，滚动轮滑为缩放）
最新发布
Turn_to_empty的博客
04-10 517
D3JS 画布缩放与平移（修改d3默认事件(进阶)：按住轮滑为平移，滚动轮滑为缩放）
d3 canvas 绘制力导向图
qq_32862143的博客
08-26 1517
d3 canvas 绘制力导向图 下面是分别使用svg和canvas绘制的效果图 svg绘制的效果图 canvas绘制的效果图 数据量小的时候，使用svg绘制是没什么问题的，但是一旦点和线的数据量一大，就会造成页面卡顿的情况，因此只能使用canvas又重新绘制了一遍，下面是参考了他人写的，进行改进，链接放在最下面了 html <div class="micro-topo-chart"> <canvas id="topo-canvas" class="topo-canvas" w
d3高级应用专题 二 在Canvas中绘制形状
qq_44884577的博客
04-19 490
d3高级应用专题 二 在Canvas中绘制形状
数据可视化-canvas-svg-Echarts
08-19
数据可视化是一种将复杂的数据集转化为易于理解的图形或图像的过程，它在IT行业中扮演着至关重要的角色，尤其在大数据分析、商业智能和科学研究等领域。在本主题中，我们将深入探讨三种主要的数据可视化技术：HTML5...
canvas可视化波形音频播放器(原创)
03-07
"canvas可视化波形音频播放器(原创)"项目就是这样一个实现，它将音频数据与视觉元素相结合，提供了一种直观的音频播放体验。 首先，我们要理解Canvas的基本概念。Canvas是一个基于矢量图形的二维画布，通过...
HTML+CSS+JS数据可视化大屏平台模板实例21-大数据可视化通用模板
03-25
HTML+CSS+JS数据可视化大屏平台模板实例21是一个专为大数据可视化设计的通用模板，它结合了三种核心技术：HTML、CSS和JavaScript，来创建交互式且具有吸引力的数据展示界面。这种模板对于数据分析、监控和决策支持...
d3 数据可视化
08-01
D3.js，简称D3，是一个强大的JavaScript库，专为创建动态、交互式的数据可视化而设计。由Mike Bostock开发，它利用SVG、Canvas和HTML来操作DOM（文档对象模型），将数据绑定到文档元素上，进而实现复杂的数据可视化...
基于d3.v3和echarts关于部分国控地表数据的可视化
04-14
在本项目中，我们主要探讨的是如何利用d3.v3和echarts这两个强大的JavaScript库来实现部分国控地表数据的可视化。d3.v3是一个数据驱动的文档操作库，它允许开发者用数据来操作DOM元素，从而创建复杂的、动态的数据...
基于d3js的simulation力导图canvas实现的带缩略图的关系图谱案例
08-10
基于d3.js的simulation力导图，canvas实现的带缩略图的关系图谱案例
使用D3和Canvas显示导弹可打击范围的世界地图
08-10
使用D3和Canvas显示导弹可打击范围的世界地图
如何在CANVAS中使用D3.JS
05-16
在canvas中使用d3.js。虽然d3.js声称支持了canvas，可是并没有提供实例代码，这个文档可以让你一目了然。
HTML5 Canvas在线书法练字代码.zip
07-04
HTML5 Canvas在线书法练字代码是一款简单的在线书法文字练习特效。
d3高级应用专题(二)：在Canvas中绘制形状
甘焕的博客
08-25 5392
d3第4版添加了对Canvas的支持，在d3.shape包中的每一个形状都可以直接绘制在Canvas上，可以很方便地将SVG的代码应用到Canvas上。
【d3.js】canvas下力导向图的缩放平移和拖拽兼容
qq_41841048的博客
03-26 1995
这个周零散解决了一些的关于d3问题，算是入了门，因而写了博客，顺便也作为周报的内容，所以篇幅会比正常我平时写的周报长很多，详细到代码层面。目前除了这次代码提到的v4，也完成了v6版本对应的代码。 1 从简单做起——html单页面文件开发 目前能找到的很多学习用的demo都是cdn方式引入，直接一个单页面html文件开发，而且出问题也能很方便定位查找，再者v6版本刚出不久，对于诸多api也是有了比较大的改动，讨论度不如有教程的v4，所以为了入门，同时为了避免要下各种各样的d3 npm包，还有考虑各种变量冲突、
【D3.js开发入门：绘制图表】静态图表
popstarqq的博客
05-04 1432
什么是 D3.js？ D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库。基于数据操作文档的 JavaScript 库。 说到D3不得不提到Echarts，Echarts和D3都是一个数据可视化的工具；而且都能实现一些相同的可视化图效果；那他们有什么不同呢？区别还是很大的 库层面的不同： 1 D3使用svg绘制图形，echarts使用canvas绘制图形 2 D3代码自由度高，相当灵活，但是学习成本也大；相反echarts封...
java实现js映射_D3.js在canvas和svg中映射缩放行为
weixin_31633071的博客
03-08 203
canvas 绘图函数使用纬度/经度坐标的投影值，但您没有在 zoom 处理程序中更新 scale 的 scale 和 translate .获得您所追求的行为的一种方法是从 zoom 处理程序中的 svg 上的 transform 切换到 projection 上的 transform .不同之处是：更新 zoom 行为以使用 projection translate 和 scale 作...
D3.js + Canvas 绘制组织结构图
weixin_33898233的博客
06-01 1598
使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: https://bl.ocks.org/mbostock/4339083 使用svg有好有坏: 好处是方便操作dom元素, 添加用户交互 坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿 在大多数数据量不是特别大情况下, 使用svg的好处是远远盖过坏处的,但如果我们真的需要渲染大量...
Canvas绘制自动驾驶数据回显可视化的原理
06-13
Canvas 绘制自动驾驶数据回显可视化的原理是将先前收集到的自动驾驶车辆数据进行处理，然后将处理后的数据再次传递给 Canvas 绘制引擎，使其能够重新绘制出车辆的行驶轨迹、速度变化、加速度变化等信息，并将其显示...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值