JavaScript图形实例：玩转正方形

时间 2020-06-28

标签 javascript 图形实例转正方形栏目 JavaScript 繁體版

原文原文链接

在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：javascript

void rotate(in float angle); // 按给定的弧度顺时针旋转anglehtml

利用rotate（）方法能够很方便地将绘制的图形旋转。下面咱们经过对正方形进行旋转变换来玩转正方形。java

1．利用strokeRect（）方法绘制正方形并旋转

例如，将坐标原点移到画布中央，而后以新的坐标原点为左上角坐标绘制一个正方形，再用rotate（）方法将坐标系旋转10°后，再绘制一个正方形。canvas

编写以下的HTML文件。浏览器

<!DOCTYPE html>3d

<head>htm

<title>正方形</title>对象

function draw(id)ip

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.translate(200, 200);

context.strokeStyle ='red';

context.lineWidth = 2;

context.beginPath();

for (i =0; i<2; i++)

{

context.rotate(i*10*(2 * Math.PI / 360));

context.strokeRect(0,0,100,100);

}

</script>

</head>

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，能够看到在画布中绘制出如图1所示的正方形图案。

图1 两个正方形

上面程序中循环次数为2，绘制两个正方形，若将语句“for (i =0; i<2; i++)”修改成

“for (i =0; i<36; i++)”，绘制36个正方形，在画布中绘制出如图2所示的图形。

图2 36个正方形

若将上面程序段中的循环语句修改以下，其他部分不变，则在画布中绘制出如图3所示的图形。

for (i =0; i <360; i++)

{

context.rotate(i*(2 * Math.PI / 360));

context.strokeRect(0,0,120,120);

}

图3 经过每次旋转i°绘制的360个正方形

2．经过旋转90°绘制4条直线的方式绘制正方形

咱们能够采用绘制正N边形的方法，经过每次旋转90°绘制4条直线的方式绘制正方形。编写以下的HTML文件。

<!DOCTYPE html>

<head>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.translate(200, 200);

context.strokeStyle ='red';

context.lineWidth = 2;

context.beginPath();

context.moveTo(0,0);

for (k=1;k<=4;k++)

{

context.lineTo(0, 150);

context.translate(0,150);

context.rotate(-90* (2 * Math.PI / 360));

}

context.stroke();

}

</script>

</head>

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，能够在画布中绘制出如图4所示的正方形图案。

图4 一个正方形

修改上面的核心绘图代码以下，能够在画布中绘制出如图5所示的图案。

context.beginPath();

context.moveTo(0,0);

for (k=0;k<=360;k+=6)

{

context.lineTo(0, 150+k/120);

context.translate(0,150+k/120);

context.rotate(-91* (2 * Math.PI / 360));

}

context.stroke();

图5 旋转角度修改成91°绘制的图形

若再次修改核心绘图代码以下，则能够在画布中绘制出如图6所示的正方形旋转图案。

context.beginPath();

context.moveTo(0,0);

for (k=0;k<=540;k+=2)

{

context.lineTo(0, k/2);

context.translate(0,k/2);

context.rotate(-91* (2 * Math.PI / 360));

}

context.stroke();

图6 正方形旋转图案

若是将绘制图6程序中的旋转角度改成121°，即修改语句“context.rotate(-91* (2 * Math.PI / 360));”为“context.rotate(-121* (2 * Math.PI / 360));” ，则能够在画布中绘制出如图7所示的三角形旋转图案。

图7 正三角形旋转图案

3．绘制正方造成圆

咱们能够经过不断旋转绘制正方形，获得圆形图案。编写以下的HTML文件。

<!DOCTYPE html>

<head>

<title>正方造成圆</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.translate(200, 200);

context.strokeStyle ='red';

context.lineWidth = 2;

context.beginPath();

context.moveTo(0,0);

for (i =0; i <=360; i+=5)

{

context.rotate(5*(2 * Math.PI / 360));

for (k=1;k<=4;k++)

{

context.lineTo(0, 100);

context.translate(0, 100);

context.rotate(-90* (2 * Math.PI / 360));

}

context.stroke();

}

</script>

</head>

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，能够在画布中绘制出如图8所示的圆形图案。

图8 正方造成圆

上面程序中绘制的正方形边长为100，若将绘制的正方形边长修改成200，能够在画布中绘制出如图9所示的圆形图案。实际会比显示的图案大，但超出画布范围的图形不会显示，所以获得如图9所示的图形。

图9 正方造成圆中间放大版

修改绘制图8程序中的核心绘图代码以下，能够在画布中绘制出如图10所示的图案。

context.beginPath();

context.moveTo(0,0);

for (i =0; i <=180; i++)

{

context.rotate(2*(2 * Math.PI / 360));

for (k=1;k<=4;k++)

{

context.lineTo(0, 200);

context.translate(0,200);

context.rotate(-90* (2 * Math.PI / 360));

}

context.stroke();

图10 旋转角度为2°的正方造成圆

若将上面代码中的语句“context.rotate(2*(2 * Math.PI / 360)); ”改成“context.rotate(2 * Math.PI / 360);”，且将循环次数修改成360，则在画布中绘制出如图11所示的图案。

图11 旋转角度为1°的正方造成圆

4．正方形螺旋线和正方形螺旋

在经过每次旋转90°绘制4条线段的方式绘制正方形时，若每次绘制的线段的长度逐渐增大，则会绘制出正方形螺旋线。编写以下的HTML文件。

<!DOCTYPE html>

<head>

<title>正方形螺旋线</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.translate(200, 200);

context.strokeStyle ='red';

context.lineWidth = 2;

context.beginPath();

context.moveTo(0, 0);

for (i =50; i <=200; i+=4)

{

context.lineTo(0, i);

context.translate(0, i);

context.rotate(-90* (2 * Math.PI / 360));

}

context.stroke();

}

</script>

</head>

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，能够在画布中绘制出如图12所示的正方形螺旋线。

图12 正方形螺旋线

经过正方形的平移、缩放和旋转能够绘制出由正方形构成的螺旋图案。编写以下的HTML文件。

<!DOCTYPE html>

<head>

<title>正方形螺旋</title>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEDD";

context.fillRect(0,0,400,400);

context.translate(250,30);

context.fillStyle = 'rgba(255,0,255,0.25)';

for(var i = 0;i < 50;i++)

{

context.translate(40,40);

context.scale(0.95,0.95);

context.rotate(Math.PI /10);

context.fillRect(0,0,80,80);

}

</script>

</head>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，能够在画布中绘制出如图13所示的正方形螺旋图案。

图13 正方形螺旋图案