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>對象
<script type="text/javascript">blog
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</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>
<title>正方形</title>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</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>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</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>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，能夠在畫布中繪製出如圖12所示的正方形螺旋線。
圖12 正方形螺旋線
經過正方形的平移、縮放和旋轉能夠繪製出由正方形構成的螺旋圖案。編寫以下的HTML文件。
<!DOCTYPE html>
<head>
<title>正方形螺旋</title>
<script type="text/javascript">
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 onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，能夠在畫布中繪製出如圖13所示的正方形螺旋圖案。
圖13 正方形螺旋圖案
- 1. JavaScript圖形實例：正多邊形
- 2. JavaScript圖形實例：圓形圖案
- 3. JavaScript圖形實例：正弦曲線
- 4. JavaScript圖形實例：SierPinski三角形
- 5. JavaScript圖形實例：圖形的旋轉變換
- 6. JavaScript圖形實例：曲線方程
- 7. JavaScript圖形實例：圖形的扇形變換和環形變換
- 8. JavaScript圖形實例：合成花卉圖
- 9. JavaScript圖形實例：布紋圖案
- 10. JavaScript圖形實例：窗花圖案
- 更多相關文章...
- • R 繪圖 - 條形圖 - R 語言教程
- • 圖形數據庫是什麼？ - NoSQL教程
- • PHP Ajax 跨域問題最佳解決方案
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。