三行代码来作画

刷知乎时候刷到一个问题,说有意思的代码,然后就有人提到,用代码画图的概念
所以就有了今天这个博客
java不知道怎么弄,所以就写了js的代码(下面这个代码生成的就是我的头像(2019.9.25-下一次换头像时间))

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Canvas</title>
<script type="text/javascript">
	var points = {};
	points[0] = '0';
	points[1] = '1';
	points[2] = '2';
	points[3] = '3';
	points[4] = '4';
	points[5] = '5';
	points[6] = '6';
	points[7] = '7';
	points[8] = '8';
	points[9] = '9';
	points[10] = 'A';
	points[11] = 'B';
	points[12] = 'C';
	points[13] = 'D';
	points[14] = 'E';
	points[15] = 'F';
    function drawFour()
	{
		//获取canvas元素
		var canvas = document.getElementById("canvas");
		if(canvas == null)
		   return false;
		//获取上下文
		var context = canvas.getContext('2d');
		for(var i = 0;i<512;i++){
		    for(var j = 0;j<512;j++){
		        var v = '#'+getR(i,j)+getG(i,j)+getB(i,j);
		        context.fillStyle = v;
                context.fillRect(i,j,1,1);
		    }
		}
	}
	function getR(i,j){
	    return getSixT((i+j)%256);
	}
	function getG(i,j){
	    return getSixT((i-j+1024)%256);
	}
	function getB(i,j){
	    return getSixT((Math.floor(i*j/64))%256);
	}
	//10进制转16进制
	function getSixT(v){
	    return points[Math.floor(v/16)]+points[v%16];
	}
</script>
</head>
<body onLoad="drawFour()">
   <canvas id="canvas" width="512" height="512"/>
</body>

在这里插入图片描述
注:画爱心的函数
(x2+y2-1)3 -x2*y3=0

发布了127 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_33321609/article/details/101371211