[Canvas绘图] 第15节 逐“路”法则

最新推荐文章于 2023-12-03 12:00:44 发布
最新推荐文章于 2023-12-03 12:00:44 发布
阅读量473 收藏
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwsister/article/details/50204259
版权
本节目标：
(1) 对前几节获取轮廓和路径进行总结

实现步骤：

续前节，根据前几节的试验，我得到了这样的一套流程：

处理流程 >>
1. getPicData取本地服务器下项目中1.jpg图，要求大小限制在300*400，
这是为了便于比对，同时可以减小处理工作量。getPicData会打印出所有坐标点，把它拷贝为var $picDataArray。

2. getSketch把var $picDataArray处理为轮廓路径矩阵，会打印出路径矩阵信息，把它拷贝为var $pathArray。

3. 有了var $pathArray，任意时候都可以调用drawPath绘制它。


于是写了这样一个调用接口：

/**
* @usage   流程处理
* @author  mw
* @date    2015年12月07日  星期一  08:59:03 
* @param
* @return
*
*/
function deal(step) {
/*
	处理流程 >>
	1. getPicData取本地服务器下项目中1.jpg图，要求大小限制在300*400，
	这是为了便于比对，同时可以减小处理工作量。getPicData会打印出所有坐标点，
	把它拷贝为var $picDataArray。

	2. getSketch把var $picDataArray处理为轮廓路径矩阵，会打印出路径矩阵信息，
		把它拷贝为var $pathArray。

	3. 有了var $pathArray，任意时候都可以调用drawPath绘制它。
*/
	plot.init();
	setPreference();
	
	switch (step) {
		case 1: 
			getPicData();
			break;
		case 2:
			if ($picDataArray) {
				getSketch();
			}
			break;
		case 3:
			if ($pathArray) {
				setSector(1,1,1,1);	
				drawPath($pathArray, 0, 0, 500);
			}
			break;
		default:
			break;	
	}

}
这三步曲中的三个主要处理函数分别是： 

/**
* @usage   取轮廓映射点图map
* @author  mw
* @date    2015年12月03日  星期四  07:50:42 
* @param
* @return
*
*/
	function getPicData() {		
		plot.init();
		setPreference();
		
		//图片
		var image = new Image();
		image.src = "./1.jpg";
		//只处理这100*100个象素
		var width = 300;
		var height = 400;
		//结果
		var retArray = new Array();
		var pointInfo = "var $picDataArray = [";
		
		image.onload = function() {
			plot.drawImage(image);
			var imagedata = plot.getImageData(0, 0, width, height);
			
			
			var pos = 0;
			var R0 = 0;
			var R1 = 0;
			var G0 = 0;
			var G1 = 0;
			var B0 = 0;
			var B1 = 0;
			var gap = 30;
			
			
			//水平方向找差异
			for (var row = 0; row < height; row++) {
				for (var col = 1; col < width; col++) {
					//pos最小为1
					pos =row * width  + col;
						R0 = imagedata.data[4 * (pos-1)];				
						R1 = imagedata.data[4 * pos];
						G0 = imagedata.data[4 * (pos-1)+1];
						G1 = imagedata.data[4 * pos+1];
						B0 = imagedata.data[4 * (pos-1)+2]
						B1 = imagedata.data[4 * pos + 2]
					
					//简单容差判断
					if (Math.abs(R1-R0) > gap || 
							Math.abs(G1-G0)>gap || 
							Math.abs(B1-B0)>gap) {
						retArray.push(col);
						retArray.push(row);
						
						//记录坐标，打印信息
						pointInfo += "["+col.toString()+", "+row.toString()+"], ";
					}
				}
			}
			
			
			//垂直方向找差异
			for (var col = 0; col < width; col++) {
				for (var row = 1; row < height; row++) {
					//pos最小为第二行
					pos =row * width  + col;
						R0 = imagedata.data[4 * (pos-width)];				
						R1 = imagedata.data[4 * pos];
						G0 = imagedata.data[4 * (pos-width)+1];
						G1 = imagedata.data[4 * pos+1];
						B0 = imagedata.data[4 * (pos-width)+2];
						B1 = imagedata.data[4 * pos + 2];
					
					//简单容差判断
					if (Math.abs(R1-R0) > gap || 
							Math.abs(G1-G0)>gap || 
							Math.abs(B1-B0)>gap) {
						retArray.push(col);
						retArray.push(row);
						
						//记录坐标，打印信息
						pointInfo += "["+col.toString()+", "+row.toString()+"], ";
					}
				}
			}		
			
			plot.translate(300, 0);

			
			while (retArray.length  > 4) {
				fillCircle(retArray.shift(), retArray.shift(), 1);
				
			}
						
			pointInfo += "];";
			var pointInfoNode = document.createTextNode(pointInfo);
			document.body.appendChild(pointInfoNode);
			
	}	
}
以及 

<span style="font-size:18px;">/**
* @usage   获取轮廓
* @author  mw
* @date    2015年12月06日  星期日  07:50:37 
* @param
* @return
*
*/
function getSketch() {
	plot.init();
	setPreference();
	
	setSector(4,1,1,1);
	//axis(0, 0, 180);
	
	//数据录入
	var map = new Map();
	for (var i = 0; i < $picDataArray.length; i++) {
		map.put($picDataArray[i][0], $picDataArray[i][1]);
	}
	
	map.sort();	
	
	//存放经过排序的map的每个x坐标对应的y坐标的数量
	var lenArray = new Array();
	var len = 0;
	
	//数据打印校验		
	var s = "********数据长度+"+$picDataArray.length +"*********";
	for (var i = 0; i < map.size(); i++) {
		x = map.keys[i];	
		len = map.get(x).length;
		lenArray.push(len);
		s += "<x =" + x + ", len = "+len+"> ";						
	}
	
	var pointInfo = map.print() + s;
	var pointInfoNode = document.createTextNode(pointInfo);
	document.body.appendChild(pointInfoNode);
		
	//确保lenArray已经取得
	//然后继续
	//点图
	for (var i = 0; i < map.size(); i++) {
		x = map.keys[i];
		//每个x对应的y序列
		
		for (j = 0; j < lenArray[i]; j++) {
			y = map.get(x)[j];
			fillCircle(x, y, 1);
		}
	}
		
	plot.translate(-200, 150);
	
	var path = new Path();
	path.setMap(map);
	path.search();
	
	//window.alert(pointInMap(41, 72, path.map));
	var pathArr = new Array();
	pathArr = path.pathArray;
	var pointInfo2 = "<p/>" + "**************" + pathArr.length + "********" + "<p/>";
	pointInfo2 += "$pathArray = [";
	for (var i = 0; i < pathArr.length; i++) {
		if (i == pathArr.length-1) {
			pointInfo2 += "[" + pathArr[i] + "]";
		}
		else {
			pointInfo2 += "[" + pathArr[i] + "], ";
		}
	}
	pointInfo2 += "];";
	var pointInfoNode2 = document.createTextNode(pointInfo2);
	document.body.appendChild(pointInfoNode2);
		
	var scale = 5;
	
	for (var i=0; i < pathArr.length-1; i++) {
		plot.moveTo(pathArr[i][0] * scale, pathArr[i][1]*scale)			
			.lineTo(pathArr[i][2] * scale, pathArr[i][3]*scale);
	}
	plot.stroke();
}</span>
以及 

<span style="font-size:18px;">/**
* @usage   轮廓路径绘制
* @author  mw
* @date    2015年12月07日  星期一  08:30:45 
* @param   路径数组arr, (x, y)中心点，r外接圆半径限定区域大小
* @return
*
*/

function drawPath(arr, x, y, r) {	
	plot.save()
		.setLineWidth(1);
	var pathArr = new Array();
	pathArr = arr;
	x = x ? x : 0;
	y = y ? y: 0;
	r = r ? r : 100;
	//缩放比例，因为路径map是规整在直径100的外接圆里的
	var scale = Math.round(r / 100);
	
	for (var i=0; i < pathArr.length-1; i++) {
		plot.moveTo(pathArr[i][0] * scale+x, pathArr[i][1]*scale+y)			
			.lineTo(pathArr[i][2] * scale+x, pathArr[i][3]*scale+y);
	}
	plot.stroke();
	plot.restore();

}</span>
这样比如我想画下面这样的图：

我要做的就是保存一个路径数组：

$pathArray = [[-39,18,-34,13], [-39,18,-37,18], [-39,18,-36,20], [-39,18,-39,19], [-37,14,-34,11], [-37,14,-34,14], [-37,14,-35,16], [-37,14,-37,20], [-37,18,-37,22], [-37,21,-35,21], [-37,21,-33,25], [-37,21,-37,22], [-36,12,-34,9], [-36,12,-34,12], [-36,12,-34,14], [-36,12,-36,17], [-36,-23,-36,-15], [-36,-22,-36,-15], [-36,-22,-36,-15], [-36,-22,-36,-15], [-36,-22,-36,-15], [-36,-21,-36,-15], [-36,-21,-36,-15], [-36,-21,-36,-15], [-36,-20,-36,-15], [-36,-20,-36,-15], [-36,-20,-36,-15], [-36,-20,-36,-15], [-36,-19,-36,-15], [-36,-19,-36,-15], [-36,-19,-36,-15], [-36,-19,-36,-15], [-36,-18,-36,-15], [-36,-18,-36,-15], [-36,-18,-36,-15], [-36,-17,-36,-15], [-36,-17,-36,-15], [-36,-17,-36,-15], [-36,-17,-36,-15], [-35,-23,-35,-14], [-35,-23,-35,-14], [-35,-22,-35,-14], [-35,-22,-35,-14], [-35,-20,-35,-14], [-35,-19,-35,-14], [-35,-19,-35,-14], [-35,-16,-35,-14], [-35,-16,-35,-14], [-35,-16,-35,-14], [-35,-15,-35,-14], [-35,-15,-35,-14], [-35,-15,-35,-14], [-35,-15,-35,-14], [-35,16,-33,18], [-35,16,-35,18], [-35,-25,-30,-30], [-35,-25,-35,-24], [-35,8,-32,5], [-35,8,-35,19], [-35,18,-33,18], [-35,18,-32,20], [-35,18,-35,19], [-34,-13,-34,-12], [-34,-13,-34,-12], [-34,11,-34,20], [-34,12,-34,20], [-34,12,-34,20], [-34,12,-34,20], [-34,12,-34,20], [-34,13,-34,20], [-34,13,-34,20], [-34,13,-34,20], [-34,14,-34,20], [-34,14,-34,20], [-34,14,-34,20], [-34,14,-34,20], [-34,15,-34,20], [-34,15,-34,20], [-34,9,-34,12], [-34,9,-34,12], [-34,10,-34,12], [-34,15,-34,20], [-34,-29,-28,-34], [-34,-29,-30,-29], [-34,-29,-32,-27], [-34,-29,-34,-24], [-34,-12,-34,-10], [-34,-12,-34,-10], [-34,-12,-34,-10], [-34,-11,-34,-10], [-34,-11,-34,-10], [-34,-11,-34,-10], [-34,4,-31,2], [-34,4,-32,4], [-34,4,-34,9], [-34,20,-32,20], [-34,20,-31,23], [-34,20,-34,25], [-33,22,-31,22], [-33,22,-31,24], [-33,22,-33,25], [-33,-25,-28,-25], [-33,-25,-30,-22], [-33,-25,-33,-23], [-32,-8,-32,-7], [-32,2,-32,3], [-32,23,-32,24], [-31,-8,-31,-6], [-31,-8,-31,-6], [-31,-7,-31,-6], [-31,1,-31,3], [-31,1,-31,3], [-31,2,-31,3], [-31,2,-31,3], [-31,2,-31,3], [-31,2,-31,3], [-31,22,-31,26], [-31,23,-31,26], [-31,23,-31,26], [-31,23,-31,26], [-31,24,-31,26], [-31,25,-31,26], [-31,-34,-23,-42], [-31,-34,-28,-34], [-31,-34,-28,-31], [-31,-34,-31,-27], [-31,0,-28,-2], [-31,0,-29,0], [-31,0,-31,2], [-31,-16,-23,-24], [-31,-16,-28,-14], [-31,-16,-31,-14], [-30,-14,-28,-14], [-30,-14,-23,-7], [-30,-14,-30,-13], [-30,-31,-28,-33], [-30,-31,-28,-31], [-30,-31,-30,-28], [-30,-29,-30,-28], [-30,-11,-14,-11], [-30,-11,-25,-6], [-29,-5,-29,0], [-29,-5,-29,0], [-29,-5,-29,0], [-29,-4,-29,0], [-29,-4,-29,0], [-29,8,-29,9], [-29,8,-29,9], [-29,17,-29,18], [-29,28,-29,29], [-29,-26,-29,-24], [-29,-5,-29,-1], [-29,-5,-29,-1], [-29,-4,-29,-1], [-29,-27,-29,-25], [-29,-27,-29,-25], [-29,-26,-29,-25], [-29,-5,-29,-1], [-29,-5,-29,-1], [-29,-4,-29,-1], [-29,-4,-29,-1], [-28,-29,-28,-25], [-28,-28,-28,-25], [-28,-28,-28,-25], [-28,-28,-28,-25], [-28,-27,-28,-25], [-28,-27,-28,-25], [-28,-27,-28,-25], [-28,-27,-28,-25], [-28,-26,-28,-25], [-28,-4,-28,-1], [-28,-3,-28,-1], [-28,-29,-28,-25], [-28,-29,-28,-25], [-28,-29,-28,-25], [-28,-29,-28,-25], [-28,-28,-28,-25], [-28,-28,-28,-25], [-28,-28,-28,-25], [-28,-27,-28,-25], [-28,-27,-28,-25], [-28,-27,-28,-25], [-28,-27,-28,-25], [-28,-32,-28,-25], [-28,-32,-28,-25], [-28,-32,-28,-25], [-28,-31,-28,-25], [-28,-31,-28,-25], [-28,-31,-28,-25], [-28,-31,-28,-25], [-28,-30,-28,-25], [-28,-30,-28,-25], [-28,-30,-28,-25], [-28,-29,-28,-25], [-28,-29,-28,-25], [-28,-29,-28,-25], [-28,-29,-28,-25], [-28,-28,-28,-25], [-28,-28,-28,-25], [-28,-28,-28,-25], [-28,-27,-28,-25], [-28,-15,-13,-15], [-28,-15,-19,-6], [-28,-7,-12,-23], [-28,-7,-2,-7], [-28,-7,-20,0], [-28,-7,-28,-6], [-28,5,-28,7], [-28,-31,-28,-27], [-28,-31,-28,-27], [-28,-30,-28,-27], [-28,-30,-28,-27], [-28,-30,-28,-27], [-28,-29,-28,-27], [-28,-29,-28,-27], [-28,-29,-28,-27], [-28,-29,-28,-27], [-28,-28,-28,-27], [-28,30,-24,30], [-28,30,-25,33], [-26,-17,-13,-17], [-26,-17,-21,-13], [-26,-17,-26,-4], [-25,-14,-19,-19], [-25,-14,-13,-14], [-25,-14,-17,-6], [-25,-14,-25,-7], [-24,-20,-20,-24], [-24,-20,-19,-20], [-24,-20,-24,-7], [-24,32,-24,33], [-24,32,-24,33], [-24,-44,-18,-50], [-24,-44,-22,-44], [-24,-44,-19,-39], [-24,-44,-24,-41], [-24,32,-24,33], [-24,32,-24,33], [-24,32,-24,33], [-24,32,-24,33], [-24,32,-24,33], [-23,32,-23,33], [-23,23,-21,21], [-23,23,-20,23], [-23,-41,-16,-41], [-23,-41,-21,-39], [-23,-41,-23,-40], [-23,-4,-21,-4], [-23,-4,-18,1], [-23,-4,-23,-3], [-23,33,-23,35], [-22,33,-22,35], [-21,-22,-19,-24], [-21,-22,-8,-22], [-21,-22,-21,-13], [-21,3,-17,3], [-21,3,-17,6], [-21,-45,-11,-36], [-21,-45,-21,-39], [-21,-42,-17,-46], [-21,-42,-15,-42], [-21,-42,-17,-39], [-21,-42,-21,-39], [-21,22,-21,23], [-20,12,-18,14], [-20,18,-18,18], [-20,18,-15,23], [-20,18,-20,19], [-20,-20,-16,-24], [-20,-20,-20,-13], [-20,14,-11,5], [-20,14,-18,14], [-20,14,-20,20], [-20,16,-20,20], [-20,16,-18,18], [-20,16,-20,20], [-19,-2,-3,-2], [-19,-2,-16,1], [-19,-2,-19,0], [-19,9,-19,18], [-19,9,-19,18], [-19,9,-15,13], [-19,9,-19,20], [-19,12,-15,8], [-19,12,-15,12], [-19,12,-17,14], [-19,12,-19,20], [-18,-24,-14,-24], [-18,-24,-14,-20], [-18,-24,-18,-22], [-18,-9,-16,-11], [-18,-9,0,-9], [-18,-9,-15,-6], [-18,-9,-18,-7], [-18,21,-16,19], [-18,21,-10,21], [-18,42,-18,44], [-18,43,-18,44], [-18,43,-18,44], [-18,-49,-16,-51], [-18,-49,-1,-49], [-18,-49,-18,-47], [-18,4,-16,4], [-18,4,-16,5], [-18,4,-18,6], [-17,-47,-13,-51], [-17,-47,-17,-39], [-17,-45,-11,-51], [-17,-45,-14,-45], [-17,-45,-15,-42], [-17,-45,-17,-39], [-17,-28,-17,-21], [-17,-27,-17,-21], [-17,-27,-17,-21], [-17,-27,-17,-21], [-17,-27,-17,-21], [-17,-26,-17,-21], [-17,-26,-17,-21], [-17,-39,-17,-37], [-17,-39,-17,-37], [-17,-38,-17,-37], [-17,-30,-17,-21], [-17,-30,-17,-21], [-17,-29,-17,-21], [-17,-29,-17,-21], [-17,-29,-17,-21], [-17,-29,-17,-21], [-17,-28,-17,-21], [-17,-27,-17,-21], [-17,-27,-17,-21], [-17,-26,-17,-21], [-17,-26,-17,-21], [-17,44,-15,42], [-17,44,5,44], [-17,44,-14,47], [-16,-31,-16,-27], [-16,-31,-16,-27], [-16,-29,-16,-27], [-16,-29,-16,-27], [-16,-29,-16,-27], [-16,-29,-16,-27], [-16,-28,-16,-27], [-16,-33,-16,-28], [-16,-33,-16,-28], [-16,-31,-16,-28], [-16,-31,-16,-28], [-16,-30,-16,-28], [-16,-1,-14,-3], [-16,-1,-4,-1], [-16,-1,-14,2], [-16,-1,-16,1], [-16,4,-16,6], [-16,5,-16,6], [-16,-38,-14,-41], [-16,-38,-1,-38], [-16,-38,-13,-36], [-16,-38,-16,-36], [-16,-32,-16,-30], [-16,-32,-16,-30], [-16,-32,-16,-30], [-16,-31,-16,-30], [-16,-36,-13,-38], [-16,-36,-16,-32], [-16,-34,-16,-32], [-15,11,-12,8], [-14,-45,-12,-47], [-14,-45,-4,-45], [-14,-45,-14,-44], [-14,-41,-14,-36], [-14,-42,-14,-41], [-14,23,-8,17], [-14,23,-10,23], [-14,23,-14,24], [-14,43,-14,46], [-13,6,-9,6], [-13,6,-13,11], [-13,25,-13,26], [-13,25,-13,26], [-13,25,-13,26], [-13,-17,-13,-13], [-13,-16,-13,-13], [-13,-17,-13,-13], [-13,-16,-13,-13], [-12,9,-10,9], [-12,9,-8,14], [-12,9,-12,11], [-12,46,-10,44], [-12,46,5,46], [-12,46,-11,48], [-12,13,-10,11], [-12,13,-12,14], [-11,18,-8,18], [-11,18,-5,25], [-11,18,-11,23], [-11,-40,-2,-49], [-11,-40,-6,-40], [-11,-40,-6,-36], [-11,-40,-11,-36], [-10,-37,-5,-42], [-10,-37,-5,-37], [-10,-20,-8,-22], [-10,-20,-6,-20], [-10,-20,-8,-18], [-9,-47,-6,-50], [-9,-47,1,-47], [-9,-47,-5,-43], [-9,-47,-9,-46], [-9,15,-9,19], [-9,15,-9,19], [-9,15,-9,19], [-9,15,-9,19], [-9,16,-9,19], [-8,15,-8,18], [-8,15,-8,18], [-8,15,-8,18], [-8,16,-8,18], [-8,16,-8,18], [-8,14,-8,17], [-8,14,-8,17], [-8,14,-8,17], [-8,14,-8,17], [-8,15,-8,17], [-8,15,-8,17], [-8,15,-8,17], [-8,16,-8,17], [-8,16,-8,17], [-8,16,-8,17], [-8,14,-8,17], [-8,15,-8,17], [-8,15,-8,17], [-8,15,-8,17], [-8,15,-8,17], [-8,9,-8,11], [-8,10,-8,11], [-7,6,-4,3], [-7,6,-3,6], [-7,10,-7,12], [-7,10,-7,12], [-7,11,-7,12], [-7,-42,-4,-45], [-7,-42,-5,-42], [-7,-42,-7,-37], [-7,-19,-4,-19], [-7,-19,1,-11], [-7,-5,-7,0], [-7,11,-7,13], [-7,11,-7,13], [-7,12,-7,13], [-7,12,-7,13], [-7,12,-7,13], [-7,-12,1,-12], [-7,-12,-2,-7], [-7,12,-7,17], [-7,13,-7,17], [-7,13,-7,17], [-7,13,-7,17], [-7,14,-7,17], [-7,14,-7,17], [-7,14,-7,17], [-7,14,-7,17], [-7,15,-7,17], [-7,15,-7,17], [-7,15,-7,17], [-7,15,-7,17], [-6,14,-6,16], [-6,15,-6,16], [-5,23,-3,23], [-5,23,-3,25], [-5,23,-5,24], [-4,-45,-4,-43], [-4,-45,-4,-43], [-4,-44,-4,-43], [-4,-44,-4,-43], [-4,-18,-2,-18], [-4,-18,1,-13], [-4,-18,-4,-16], [-4,24,-4,25], [-3,-6,-3,-2], [-3,-5,-3,-2], [-3,-5,-3,-2], [-3,-5,-3,-2], [-3,-4,-3,-2], [-3,-6,-3,-2], [-3,-5,-3,-2], [-3,-5,-3,-2], [-3,-4,-3,-2], [-3,5,-1,3], [-3,5,3,5], [-3,5,-3,6], [-3,-27,2,-32], [-3,-27,-3,-25], [-3,-25,3,-20], [-3,-6,-3,-2], [-3,-5,-3,-2], [-3,-5,-3,-2], [-3,-5,-3,-2], [-3,-5,-3,-2], [-3,-4,-3,-2], [-3,-4,-3,-2], [-3,-4,-3,-2], [-3,-3,-3,-2], [-3,-6,-3,-3], [-3,-5,-3,-3], [-3,-5,-3,-3], [-3,-5,-3,-3], [-3,-5,-3,-3], [-3,-4,-3,-3], [-3,-4,-3,-3], [-2,11,0,11], [-2,11,2,15], [-2,11,-2,12], [-2,-41,0,-42], [-2,-41,2,-41], [-2,-41,0,-39], [-2,-41,-2,-38], [-2,-23,2,-27], [-2,-23,1,-23], [-2,-23,2,-19], [-2,17,2,13], [-2,17,1,17], [-2,17,0,19], [-2,17,-2,20], [-2,19,2,15], [-2,19,0,19], [-2,19,0,20], [-2,19,-2,20], [-1,-27,3,-32], [-1,-27,2,-27], [-1,-27,1,-24], [-1,-27,-1,-22], [-1,14,2,14], [-1,14,1,16], [-1,14,-1,20], [-1,-11,-1,-8], [-1,-11,-1,-8], [-1,11,-1,20], [0,-10,0,-9], [0,-10,0,-9], [0,19,0,20], [0,-45,3,-45], [0,-45,14,-32], [0,-14,0,-10], [0,-13,0,-10], [0,-13,0,-10], [0,-13,0,-10], [0,-12,0,-10], [0,-12,0,-10], [0,-12,0,-10], [0,-12,0,-10], [0,-11,0,-10], [0,-11,0,-10], [0,19,0,20], [1,-12,1,-10], [1,-12,1,-10], [1,-12,1,-10], [1,-11,1,-10], [1,43,3,41], [1,43,3,43], [1,43,4,46], [1,43,1,47], [1,-28,1,-25], [1,-28,1,-25], [1,-27,1,-25], [1,-27,1,-25], [1,-26,1,-25], [1,-26,1,-25], [2,-42,4,-44], [2,-42,7,-42], [2,-42,2,-41], [2,-28,2,-25], [2,-27,2,-25], [2,-27,2,-25], [2,-27,2,-25], [2,-27,2,-25], [3,37,4,36], [3,37,4,37], [3,37,3,42], [3,39,4,37], [3,39,3,42], [3,41,3,42], [3,41,3,42], [3,41,3,42], [3,-21,6,-25], [3,-21,6,-21], [3,-21,3,-20], [3,40,3,42], [3,41,3,42], [3,-31,5,-31], [3,-31,6,-27], [3,-31,3,-29], [4,5,4,7], [4,-28,6,-28], [4,-28,6,-25], [4,-28,4,-25], [4,6,4,7], [4,21,4,22], [4,21,4,22], [5,10,7,10], [5,10,7,12], [5,10,5,14], [5,12,7,10], [5,12,7,12], [5,12,5,14], [5,-1,5,1], [6,7,6,8], [6,7,6,8], [6,-28,6,-22], [6,-27,6,-22], [6,-27,6,-22], [6,-27,6,-22], [6,-27,6,-22], [6,-26,6,-22], [6,-26,6,-22], [6,-26,6,-22], [6,-25,6,-22], [6,-25,6,-22], [6,-25,6,-22], [6,-25,6,-22], [6,-24,6,-22], [6,-24,6,-22], [6,-24,6,-22], [6,-24,6,-22], [6,-23,6,-22], [6,-23,6,-22], [6,-1,6,1], [6,37,8,35], [6,37,8,37], [6,-27,6,-23], [6,-26,6,-23], [6,-26,6,-23], [6,-26,6,-23], [6,-25,6,-23], [6,-25,6,-23], [6,-25,6,-23], [6,-24,6,-23], [6,14,6,16], [6,14,6,16], [6,14,6,16], [6,15,6,16], [7,10,7,14], [7,10,7,14], [7,10,7,14], [7,11,7,14], [7,11,7,14], [7,11,7,14], [7,12,7,14], [7,12,7,14], [7,12,7,14], [7,12,7,14], [7,13,7,14], [7,-41,11,-37], [7,-41,7,-39], [7,9,7,14], [7,10,7,14], [7,11,7,14], [7,12,7,14], [7,12,7,14], [7,12,7,14], [7,12,7,14], [7,13,7,14], [7,13,7,14], [11,35,11,37], [11,35,11,37], [11,35,11,36], [11,35,11,36], [11,35,11,36], [12,-32,14,-32], [12,-32,15,-29], [13,-16,14,-18], [13,-16,13,-10], [13,-15,13,-10], [13,-14,13,-10], [13,-14,13,-10], [13,-14,13,-10], [13,-14,13,-10], [13,-13,13,-10], [13,-13,13,-10], [13,-13,13,-10], [13,-12,18,-7], [13,-12,13,-10], [13,-15,13,-10], [13,-15,13,-10], [13,-14,13,-10], [13,-14,13,-10], [13,-14,13,-10], [13,-29,15,-29], [13,-29,16,-26], [13,-24,15,-22], [13,-24,13,-6], [13,-22,16,-25], [13,-22,17,-22], [13,-22,13,-6], [13,-20,15,-21], [13,-20,13,-6], [13,-15,13,-6], [13,-15,13,-6], [13,-15,13,-6], [13,-14,13,-6], [13,-14,13,-6], [13,-14,13,-6], [13,-14,13,-6], [13,-10,16,-10], [13,-10,18,-6], [13,-10,13,-6], [13,-8,17,-12], [13,-8,18,-8], [13,-8,21,0], [13,-8,13,-6], [15,33,21,27], [15,33,18,33], [15,-20,18,-20], [15,-20,15,-19], [16,-19,16,-17], [16,-25,16,-22], [16,-25,16,-22], [16,-25,16,-22], [16,-25,16,-22], [16,-24,16,-22], [16,-24,16,-22], [16,-12,18,-14], [16,-12,16,-7], [16,-24,16,-19], [16,-24,16,-19], [17,-2,19,-2], [17,-2,37,18], [17,-22,17,-12], [17,-22,17,-12], [17,-22,17,-12], [17,-19,17,-12], [17,-18,17,-12], [17,-18,17,-12], [17,-18,17,-12], [17,-16,17,-12], [17,-15,17,-12], [17,-15,17,-12], [17,-19,17,-13], [17,-18,17,-13], [17,-18,17,-13], [17,-18,17,-13], [17,-17,17,-13], [17,-17,17,-13], [17,-17,17,-13], [17,-17,17,-13], [17,-16,17,-13], [17,-16,17,-13], [17,-15,17,-13], [17,-7,17,-1], [18,-20,18,-14], [18,-20,18,-14], [18,-20,18,-14], [18,-20,18,-14], [18,-19,18,-14], [18,-19,18,-14], [18,-19,18,-14], [18,-19,18,-14], [18,-18,18,-14], [18,-18,18,-14], [18,-18,18,-14], [18,-17,18,-14], [18,-17,18,-14], [18,-17,18,-14], [18,-17,18,-14], [18,-16,18,-14], [18,-16,18,-14], [18,-16,18,-14], [18,-15,18,-14], [18,-15,18,-14], [18,-15,18,-14], [18,-19,18,-15], [18,-19,18,-15], [18,-18,18,-15], [18,-18,18,-15], [18,-18,18,-15], [18,-17,18,-15], [18,-17,18,-15], [18,-17,18,-15], [18,-17,18,-15], [18,-16,18,-15], [18,-16,18,-15], [18,-16,18,-15], [18,-7,20,-7], [18,-7,20,-5], [19,31,29,21], [19,31,23,31], [19,31,22,34], [22,33,22,35], [22,33,22,35], [22,33,22,35], [22,34,22,35], [22,29,22,37], [22,33,22,37], [22,34,22,37], [22,34,22,37], [22,34,22,37], [22,34,22,37], [23,29,23,34], [23,30,23,34], [23,30,23,34], [23,30,23,34], [23,31,23,34], [23,32,23,34], [23,32,23,34], [23,32,23,34], [23,32,23,34], [23,33,23,34], [23,32,23,34], [23,33,23,34], [23,33,23,34], [23,33,23,34], [23,-3,23,-2], [24,1,24,7], [24,1,24,7], [24,2,24,7], [25,-2,25,2], [25,23,29,19], [25,23,27,23], [25,23,25,26], [25,-2,25,2], [26,-1,26,3], [26,2,26,3], [26,6,33,12], [26,6,26,8], [26,-1,26,0], [26,15,26,23], [26,16,26,23], [26,16,26,23], [26,16,26,23], [26,17,26,23], [26,17,26,23], [27,19,33,13], [27,19,29,19], [27,19,29,21], [27,19,27,23], [27,38,27,39], [27,38,27,40], [27,38,27,40], [27,39,27,40], [27,39,27,40], [27,34,27,41], [27,36,27,41], [27,39,27,41], [27,39,27,41], [27,39,27,41], [27,39,27,41], [27,40,27,41], [27,40,27,41], [28,16,31,12], [28,16,39,16], [28,16,28,22], [28,33,28,38], [28,33,28,38], [28,33,28,38], [28,34,28,38], [28,34,28,38], [28,34,28,38], [28,34,28,38], [28,35,28,38], [28,35,28,38], [28,35,28,38], [28,36,28,38], [28,36,28,38], [28,36,28,38], [28,36,28,38], [28,37,28,38], [28,12,31,8], [28,12,31,12], [28,12,35,18], [28,12,28,35], [28,14,32,10], [28,14,28,35], [28,24,28,35], [28,25,28,35], [28,25,28,35], [28,25,28,35], [28,27,28,35], [28,27,28,35], [28,28,28,35], [28,29,28,35], [28,29,28,35], [28,29,28,35], [28,29,28,35], [28,30,28,35], [28,30,28,35], [28,30,28,35], [28,31,28,35], [28,31,28,35], [28,31,28,35], [28,31,28,35], [28,32,28,35], [28,32,28,35], [28,32,28,35], [28,32,28,35], [28,33,28,35], [28,33,28,35], [28,33,28,35], [28,34,28,35], [28,34,28,35], [28,34,28,35], [28,24,28,34], [28,24,28,34], [28,24,28,34], [28,24,28,34], [28,25,28,34], [28,25,28,34], [28,25,28,34], [28,25,28,34], [28,26,28,34], [28,26,28,34], [28,26,28,34], [28,27,28,34], [28,27,28,34], [28,27,28,34], [28,27,28,34], [28,28,28,34], [28,28,28,34], [28,28,28,34], [28,29,28,34], [28,29,28,34], [28,29,28,34], [28,29,28,34], [28,30,28,34], [28,30,28,34], [28,30,28,34], [28,31,28,34], [28,31,28,34], [28,31,28,34], [28,31,28,34], [28,32,28,34], [28,32,28,34], [28,32,28,34], [28,32,28,34], [28,33,28,34], [28,33,28,34], [28,33,28,34], [28,44,28,45], [28,20,28,33], [28,22,28,33], [28,22,28,33], [28,22,28,33], [28,24,28,33], [28,24,28,33], [28,24,28,33], [28,24,28,33], [28,25,28,33], [28,25,28,33], [28,25,28,33], [28,25,28,33], [28,26,28,33], [28,26,28,33], [28,26,28,33], [28,27,28,33], [28,27,28,33], [28,28,28,33], [28,28,28,33], [28,28,28,33], [28,29,28,33], [28,29,28,33], [28,29,28,33], [28,31,28,33], [28,31,28,33], [28,31,28,33], [28,32,28,33], [28,32,28,33], [28,44,28,45], [29,20,29,31], [29,20,29,31], [29,20,29,31], [29,21,29,31], [29,21,29,31], [29,22,29,31], [29,23,29,31], [29,23,29,31], [29,25,29,31], [29,25,29,31], [29,25,29,31], [29,26,29,31], [29,26,29,31], [29,26,29,31], [29,27,29,31], [29,27,29,31], [29,27,29,31], [29,28,29,31], [29,28,29,31], [29,28,29,31], [29,29,29,31], [29,29,29,31], [29,29,29,31], [29,29,29,31], [29,19,29,21], [29,20,29,21], [29,20,29,21], [30,18,30,20], [30,18,30,20], [30,18,30,20], [30,19,30,20], [30,19,30,20], [30,45,32,42], [30,45,39,45], [30,25,32,23], [30,25,39,25], [32,10,32,12], [32,43,36,43], [32,43,36,47], [32,43,32,46], [32,12,32,17], [32,12,32,17], [32,12,32,17], [35,14,39,14], [35,14,37,17], [35,14,35,18], [35,43,39,46], [35,43,35,47], [37,42,39,44], [37,42,37,47], [38,22,38,26], [38,23,38,26], [38,20,38,26], [38,20,38,26], [38,20,38,26], [38,20,38,26], [38,21,38,26], [38,21,38,26], [38,21,38,26], [38,23,38,26], [38,23,38,26], [38,18,38,26], [38,19,38,26], [38,19,38,26], [38,19,38,26], [38,19,38,26], [38,20,38,26], [38,20,38,26], [38,20,38,26], [38,20,38,26], [38,21,38,26], [38,21,38,26], [38,21,38,26], [38,22,38,26], [38,22,38,26], [38,22,38,26], [38,22,38,26], [38,23,38,26], [38,15,38,25], [38,15,38,25], [38,18,38,25], [38,19,38,25], [38,20,38,25], [38,20,38,25], [38,20,38,25], [38,20,38,25], [38,21,38,25], [38,21,38,25], [38,23,38,25], [38,24,38,25], [38,24,38,25], [38,24,38,25], [38,24,38,25], [38,43,38,47], [38,45,38,47], [38,46,38,47], [39,-50,39,51], [39,-50,39,51], [39,-49,39,51], [39,-49,39,51], [39,-49,39,51], [39,-49,39,51], [39,-48,39,51], [39,-48,39,51], [39,-48,39,51], [39,-47,39,51], [39,-47,39,51], [39,-47,39,51], [39,-47,39,51], [39,-46,39,51], [39,-46,39,51], [39,-46,39,51], [39,-46,39,51], [39,-45,39,51], [39,-45,39,51], [39,-45,39,51], [39,-44,39,51], [39,-44,39,51], [39,-44,39,51], [39,-44,39,51], [39,-43,39,51], [39,-43,39,51], [39,-43,39,51], [39,-42,39,51], [39,-42,39,51], [39,-42,39,51], [39,-42,39,51], [39,-41,39,51], [39,-41,39,51], [39,-41,39,51], [39,-41,39,51], [39,-40,39,51], [39,-40,39,51], [39,-40,39,51], [39,-39,39,51], [39,-39,39,51], [39,-39,39,51], [39,-39,39,51], [39,-38,39,51], [39,-38,39,51], [39,-38,39,51], [39,-37,39,51], [39,-37,39,51], [39,-37,39,51], [39,-37,39,51], [39,-36,39,51], [39,-36,39,51], [39,-36,39,51], [39,-36,39,51], [39,-35,39,51], [39,-35,39,51], [39,-35,39,51], [39,-34,39,51], [39,-34,39,51], [39,-34,39,51], [39,-34,39,51], [39,-33,39,51], [39,-33,39,51], [39,-33,39,51], [39,-32,39,51], [39,-32,39,51], [39,-32,39,51], [39,-32,39,51], [39,-31,39,51], [39,-31,39,51], [39,-31,39,51], [39,-31,39,51], [39,-30,39,51], [39,-30,39,51], [39,-30,39,51], [39,-29,39,51], [39,-29,39,51], [39,-29,39,51], [39,-29,39,51], [39,-28,39,51], [39,-28,39,51], [39,-28,39,51], [39,-27,39,51], [39,-27,39,51], [39,-27,39,51], [39,-27,39,51], [39,-26,39,51], [39,-26,39,51], [39,-26,39,51], [39,-25,39,51], [39,-25,39,51], [39,-25,39,51], [39,-25,39,51], [39,-24,39,51], [39,-24,39,51], [39,-24,39,51], [39,-24,39,51], [39,-23,39,51], [39,-23,39,51], [39,-23,39,51], [39,-22,39,51], [39,-22,39,51], [39,-22,39,51], [39,-22,39,51], [39,-21,39,51], [39,-21,39,51], [39,-21,39,51], [39,-20,39,51], [39,-20,39,51], [39,-20,39,51], [39,-20,39,51], [39,-19,39,51], [39,-19,39,51], [39,-19,39,51], [39,-19,39,51], [39,-18,39,51], [39,-18,39,51], [39,-18,39,51], [39,-17,39,51], [39,-17,39,51], [39,-17,39,51], [39,-17,39,51], [39,-16,39,51], [39,-16,39,51], [39,-16,39,51], [39,-15,39,51], [39,-15,39,51], [39,-15,39,51], [39,-15,39,51], [39,-14,39,51], [39,-14,39,51], [39,-14,39,51], [39,-14,39,51], [39,-13,39,51], [39,-13,39,51], [39,-13,39,51], [39,-12,39,51], [39,-12,39,51], [39,-12,39,51], [39,-12,39,51], [39,-11,39,51], [39,-11,39,51], [39,-11,39,51], [39,-10,39,51], [39,-10,39,51], [39,-10,39,51], [39,-10,39,51], [39,-9,39,51], [39,-9,39,51], [39,-9,39,51], [39,-8,39,51], [39,-8,39,51], [39,-8,39,51], [39,-8,39,51], [39,-7,39,51], [39,-7,39,51], [39,-7,39,51], [39,-7,39,51], [39,-6,39,51], [39,-6,39,51], [39,-6,39,51], [39,-5,39,51], [39,-5,39,51], [39,-5,39,51], [39,-5,39,51], [39,-4,39,51], [39,-4,39,51], [39,-4,39,51], [39,-3,39,51], [39,-3,39,51], [39,-3,39,51], [39,-3,39,51], [39,-2,39,51], [39,-2,39,51], [39,-2,39,51], [39,-2,39,51], [39,-1,39,51], [39,-1,39,51], [39,-1,39,51], [39,0,39,51], [39,0,39,51], [39,0,39,51], [39,0,39,51], [39,1,39,51], [39,1,39,51], [39,1,39,51], [39,2,39,51], [39,2,39,51], [39,2,39,51], [39,2,39,51], [39,3,39,51], [39,3,39,51], [39,3,39,51], [39,3,39,51], [39,4,39,51], [39,4,39,51], [39,4,39,51], [39,5,39,51], [39,5,39,51], [39,5,39,51], [39,5,39,51], [39,6,39,51], [39,6,39,51], [39,6,39,51], [39,7,39,51], [39,7,39,51], [39,7,39,51], [39,7,39,51], [39,8,39,51], [39,8,39,51], [39,8,39,51], [39,8,39,51], [39,9,39,51], [39,9,39,51], [39,9,39,51], [39,10,39,51], [39,10,39,51], [39,10,39,51], [39,10,39,51], [39,11,39,51], [39,11,39,51], [39,11,39,51], [39,12,39,51], [39,12,39,51], [39,12,39,51], [39,12,39,51], [39,13,39,51], [39,13,39,51], [39,13,39,51], [39,14,39,51], [39,14,39,51], [39,14,39,51], [39,14,39,51], [39,15,39,51], [39,15,39,51], [39,15,39,51], [39,15,39,51], [39,16,39,51], [39,16,39,51], [39,16,39,51], [39,17,39,51], [39,17,39,51], [39,17,39,51], [39,17,39,51], [39,18,39,51], [39,18,39,51], [39,18,39,51], [39,19,39,51], [39,19,39,51], [39,19,39,51], [39,19,39,51], [39,20,39,51], [39,20,39,51], [39,20,39,51], [39,20,39,51], [39,21,39,51], [39,21,39,51], [39,21,39,51], [39,22,39,51], [39,22,39,51], [39,22,39,51], [39,22,39,51], [39,23,39,51], [39,23,39,51], [39,23,39,51], [39,24,39,51], [39,24,39,51], [39,24,39,51], [39,24,39,51], [39,25,39,51], [39,25,39,51], [39,25,39,51], [39,25,39,51], [39,26,39,51], [39,26,39,51], [39,26,39,51], [39,27,39,51], [39,27,39,51], [39,27,39,51], [39,27,39,51], [39,28,39,51], [39,28,39,51], [39,28,39,51], [39,29,39,51], [39,29,39,51], [39,29,39,51], [39,29,39,51], [39,30,39,51], [39,30,39,51], [39,30,39,51], [39,31,39,51], [39,31,39,51], [39,31,39,51], [39,31,39,51], [39,32,39,51], [39,32,39,51], [39,32,39,51], [39,32,39,51], [39,33,39,51], [39,33,39,51], [39,33,39,51], [39,34,39,51], [39,34,39,51], [39,34,39,51], [39,34,39,51], [39,35,39,51], [39,35,39,51], [39,35,39,51], [39,36,39,51], [39,36,39,51], [39,36,39,51], [39,36,39,51], [39,37,39,51], [39,37,39,51], [39,37,39,51], [39,37,39,51], [39,38,39,51], [39,38,39,51], [39,38,39,51], [39,39,39,51], [39,39,39,51], [39,39,39,51], [39,39,39,51], [39,40,39,51], [39,40,39,51], [39,40,39,51], [39,41,39,51], [39,41,39,51], [39,41,39,51], [39,41,39,51], [39,42,39,51], [39,42,39,51], [39,42,39,51], [39,42,39,51], [39,43,39,51], [39,43,39,51], [39,43,39,51], [39,44,39,51], [39,44,39,51], [39,44,39,51], [39,44,39,51], [39,45,39,51], [39,45,39,51], [39,45,39,51], [39,46,39,51], [39,46,39,51], [39,47,39,51], [39,47,39,51], [39,47,39,51], [39,47,39,51], [39,48,39,51], [39,48,39,51], [39,48,39,51], [39,49,39,51], [39,49,39,51], [39,49,39,51], [39,49,39,51], [39,50,39,51]];

本节就到这里。 
 


 

                

        

        

    

  


    

      

        

            

              
                
                  mwsister
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
情人节爱心散射Canvas特效

				
			

			

				

					07-24
				

			

		

		

			
				
在这个“情人节爱心散射Canvas特效”中，我们主要探讨的是如何利用Canvas API来实现一个浪漫且引人注目的动画效果，特别是在情人节这样一个特殊的节日里，这种动画可以增添浓厚的节日氛围。  首先，我们需要理解...

			
		

	



                

            
              



	

		

			

				
					
扫描像素点法获取图形轮廓

				
			

			

				

					技术斋
				

				

					12-11
					
					4073
					
				

			

		

		

			
				
参考：
http://runjs.cn/code/k09vtlq7

 var _getContourData = function(contourData,canvas){
        var w = canvas.width;
        var h = canvas.height;
        _draft = canvas.getContext('2d').createI

			
		

	



              


  
              

                


	

		

			

				
					
第五节、轮廓检测、直线和圆、多边形检测

				
			

			

				

					weixin_30393907的博客
				

				

					07-18
					
					666
					
				

			

		

		

			
				
一 轮廓检测
在计算机视觉中，轮廓检测是另一个比较重要的任务，不单是用来检测图像或者视频帧中物体的轮廓，而且还有其他操作与轮廓检测相关。这些操作中，计算多边形边界，形状逼近和计算机感 兴趣区域。这是与图像数据交互时的简单操作，因为numpy中的矩阵中的矩形区域可以使用数组切片(slice)定义。在介绍物体检测(包括人脸)和物体跟踪的概念时会大量使用这种技术。
1、cv2.threshold(s...

			
		

	





	

		

			

				
					
canvas 轮廓路径提取效果

					
最新发布

				
			

			

				

					hhzzcc_的博客
				

				

					12-03
					
					628
					
				

			

		

		

			
				
为了让效果更加酷炫点，简单的用鼠标实现画笔功能，并且边框用虚线，点击绘制轮廓的同时把原内容隐藏，这里贴的是gif，加载可能比较慢可能要稍微等一下。上面图其实就黑和白两种状态，代表是内容是否是完全透明的，可以通过二进制的方式优化状态比较的过程，比如第一个。上的像素和他的上、左、上左的像素形成的区域，贴一张网上找到的图，很形象直观的表达了这个算法。种状态，每种状态右下角的点就是当前准备行进的点，我们看上图的第一张像素图，红框中像素内容是。，即当行进点获取四周的状态时可以通过左移的方式得到当前方格的二进制。

			
		

	



		

			
		



	

		

			

				
					
Canvas情人节爱心气球告白特效特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
这个"Canvas情人节爱心气球告白特效特效代码"是利用Canvas API创建的一款浪漫的互动动画，适用于情人节这样的特殊场合，为用户提供了一种创新的表白方式。  首先，让我们深入了解Canvas的基本概念。Canvas是一个基于...

			
		

	





	

		

			

				
					
html5 canvas圣诞节网页下雪背景特效

				
			

			

				

					11-06
				

			

		

		

			
				
在这个特定的案例中，“html5 canvas圣诞节网页下雪背景特效”是一种利用Canvas API创建的视觉效果，旨在为网页增添节日氛围，特别是在圣诞节期间。这种特效通常会在用户浏览网页时在背景中模拟雪花飘落的效果，给人...

			
		

	





	

		

			

				
					
canvas绘制象棋(canvas绘图)

				
			

			

				

					02-25
				

			

		

		

			
				
刚刚学习了canvas,做了一个简单的示例，希望能巩固一下自己所学的知识，从上面的代码可以看出存在很多不足的地方，比如:代码冗余,绘制棋盘的方法也不是很好，虽然功能是实现了，但作为一名写程序的程序员我们要追求...

			
		

	





	

		

			

				
					
canvas绘图任意矩形、多边形

				
			

			

				

					10-19
				

			

		

		

			
				
 <title>canvas绘图    canvas {  border: 1px solid black;  }      <canvas id="myCanvas" width="800" height="600"></canvas>  <script src="index.js"></script>   ```  接着，在`index.js`中，我们初始化...

			
		

	





	

		

			

				
					
[Canvas绘图] 第27节 三维初探

				
			

			

				

					微笑的彩虹的博客
				

				

					12-17
					
					3192
					
				

			

		

		

			
				
本节目标：
(1)  绘制椭圆
(2)  绘制简单三维图形


实现步骤：
采用贝氏曲线绘制椭圆
	//绘制椭圆
	function  BezierEllipse1(x, y, a, b, rotate) {
		//关键是bezierCurveTo中两个控制点的设置 
		//0.5和0.6是两个关键系数（在本函数中为试验而得） 
		var ox = 0.5 * a, 
		oy

			
		

	





	

		

			

				
					
[Canvas绘图] 第26节 生成表格

				
			

			

				

					微笑的彩虹的博客
				

				

					12-13
					
					2179
					
				

			

		

		

			
				
本节目标：
(1) 绘制一张Python标准库模块索引表


实现步骤：
(1) 我有下面这样一堆字符串，我想把它们放到表格中
"__future__", "__main__", "_dummy_thread", "_thread",
"abc", "aifc", "argparse", "array", "ast", "asynchat", "asyncore",
"atexit",

			
		

	





	

		

			

				
					
[Canvas绘图] 第01节 画布准备

				
			

			

				

					微笑的彩虹的博客
				

				

					11-27
					
					1251
					
				

			

		

		

			
				
本节目标：
(1) 封装Canvas API
(2) 画布分区
(3) 简单图形绘制



实现步骤：


(1) 封装Canvas API

//全局变量
var plot = function() {
	//此处封装Canvas API
}();


//初始化环境
	function setPreference() {
		plot.init()
			//颜

			
		

	





	

		

			

				
					
[Canvas绘图] 第30节 沙场点兵

				
			

			

				

					微笑的彩虹的博客
				

				

					01-07
					
					982
					
				

			

		

		

			
				
本节目标：
(1) 整理这一个月以来产生的代码
(2) 修改bug, 把函数封装成类

实现步骤：
(1)  Map类的修改与功能测试
//Map类的put(), print()功能测试
function myDraw() {
	var map = new Map();
	
	for (var i = -10; i < 10; i++) {
		map.put(i, i * i);

			
		

	





	

		

			

				
					
[Canvas绘图] 第28节 分块治图

				
			

			

				

					微笑的彩虹的博客
				

				

					12-20
					
					804
					
				

			

		

		

			
				
本节目标：
(1) 我忽然间想到一个分区域读图取轮廓的方法，想了一夜，觉得要实现看看效果怎样。


实现步骤：
（1）首先确定了中心思想，对于一张图的轮廓，必然是像素变化比较剧烈的点，这个先前已经有了
简易的判定。但是以疥是按行列扫描判定，这次我决定按区块扫描判定。按区块的目的是因为如果区块
够小，可以把它当作一个单元来处理，于是我定义了这样一个结构：
/**
* @usage

			
		

	





	

		

			

				
					
[Canvas绘图] 第06节 车轮滚滚

				
			

			

				

					微笑的彩虹的博客
				

				

					11-30
					
					787
					
				

			

		

		

			
				
本节目标：

(1) 查看各种参数下的图形效果


实现步骤：

续前节，这一次我让上一节的火柴棍子变成矩形，沿用上一节的代码，看看能得出哪些不一样的图形。





上面这张图在上一节对应的那张标注出了错，两个平移都是r/2,上一节错写成了-r/2。





最后这两张图初看起来是一样的，但注意圆心处的孔洞，可以看出区别，到这里，就很像精美的车轮了。
从

			
		

	





	

		

			

				
					
[Canvas绘图] 第04节 多边家族

				
			

			

				

					微笑的彩虹的博客
				

				

					11-29
					
					693
					
				

			

		

		

			
				
本节目标：
(1) 查看各种参数下的图形效果


实现步骤：
续前节，本节我想看看各种多边形怎样画，于是代码写成
		var row = 3;
		var col = 3;
		for (var m = 1; m <= row; m++) {
			for (var n = 1; n <= col; n++) {
			
				setSector(row,col,m,n);
				

			
		

	





	

		

			

				
					
[Canvas绘图] 第10节 图片加载

				
			

			

				

					微笑的彩虹的博客
				

				

					12-03
					
					565
					
				

			

		

		

			
				
本节目标：
(1) 用Canvas加载并显示图片


实现步骤：
效果如图:

代码如下：
/**
* @usage   图片加载处理例
* @author  mw
* @date    2015年12月03日  星期四  07:50:42 
* @param
* @return
*
*/
	function myplot() {
		plot.init();
		setPrefe

			
		

	





	

		

			

				
					
[Canvas绘图] 第02节 今日看“点"

				
			

			

				

					微笑的彩虹的博客
				

				

					11-28
					
					514
					
				

			

		

		

			
				
本节目标：
(1) 封装map类
(2) 绘制坐标系
(3) 简单函数绘制



实现步骤：
续前节，有了画布，就想要画一些东西，就从最简单的“点”开始吧。点是和函数关系在一起的，怎样画出漂亮的函数图形呢？
在画出函数以前，我先想到了一个问题，怎样查看函数上各个点的坐标值？
今天就从这里开始。
我第一步，建立了一个Html表，用于显示数值，设计得非常简单。这个表通过一个函数给

			
		

	





	

		

			

				
					
[Canvas绘图] 第11节 四大美人

				
			

			

				

					微笑的彩虹的博客
				

				

					12-03
					
					508
					
				

			

		

		

			
				
本节目标：
(1) 用Canvas加载并显示图片
(2) 实现获取轮廓点



实现步骤：
代码如下：/**
* @usage   图片加载处理例
* @author  mw
* @date    2015年12月03日  星期四  07:50:42 
* @param
* @return
*
*/
	function myplot() {		
		plot.init();
		se

			
		

	





	

		

			

				
					
[Canvas绘图] 第05节 火柴天堂

				
			

			

				

					微笑的彩虹的博客
				

				

					11-30
					
					507
					
				

			

		

		

			
				
本节目标：
(1) 查看各种参数下的图形效果



实现步骤：
续前节，我想研究一下这段代码能给我生成出多少图案。
/**
* @usage   星形系列图形
* @author  mw
* @date    2015年11月30日  星期一  13:12:53 
* @param
* @return
*
*/
	function myplot() {
		plot.init();


			
		

	





	

		

			

				
					
深入解析H5 canvas绘图技术

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"H5的canvas绘图技术共13页.pdf.zip"  知识点一：HTML5 Canvas 基础 HTML5中的Canvas元素提供了一个脚本可控制的绘图区域，开发者可以在其中绘制图形、处理图像和动画。Canvas是H5中用于绘图的核心技术...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值