用代碼繪製三次貝塞爾曲線在網頁上的技巧

對於一些複雜的網頁圖形來說,我們可以通過三次貝塞爾曲線來實現。這個三次貝塞爾曲線的繪製也是有著一定的技巧的。我們的多個不同的控制點就可以把這個三次貝塞爾曲線很精確的繪製出來。

工具/原料

dreamweaver

方法/步驟

思路。我們細細的分析一下三次貝塞爾曲線,這個圖形有著一個起點與終點,有著兩個控制點。因此,我們要使用這四個點把三次貝塞爾曲線完美的繪製出來。

畫布。你用java繪製任何的圖形都要先定義一塊面積大小合適的畫布。

<canvas id="三次貝塞爾曲線" width="450" height="250" style="border:2px solid #CD0000;">

我們通過  代碼ctx.bezierCurveTo實現三次貝塞爾曲線的起點、兩個控制點、終點的精確定位。

<script>

var c=document.getElementById("三次貝塞爾曲線");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(30,30);

ctx.bezierCurveTo(30,150,250,150,250,30);

ctx.stroke();

</script>

把樣式定義與線條的繪製代碼組合起來就有了最後的圖形效果。

改變一下JAVA代碼,就變成繪製一個圓形了。

<script>

var c=document.getElementById("circle");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(100,100,45,0,4*Math.PI);

ctx.stroke();

</script>

不斷的改變結束點的坐標,就可經繪製出部分圓形或者不同內徑的圓形。

<script>

var c=document.getElementById("circle");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(100,100,100,0,4*Math.PI);

ctx.stroke();

</script>

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場