JavaScript可以用來做很多有趣的事情,比如制作網頁特效、制作游戲,還可以制作各種形狀,比如制作一個漂亮的桃心。
首先,我們需要在HTML中準備好一個<canvas>
元素。
<canvas id="myCanvas"></canvas>
接下來,我們可以使用JavaScript來畫一個桃心。桃心的形狀由兩個半圓形和兩條直線組成。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75, 40); ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); ctx.fillStyle = "red"; ctx.fill();
在代碼中,我們首先獲取了<canvas>
元素和畫布上下文對象,然后使用beginPath()
開啟一個新的路徑。接下來,我們使用moveTo()
將當前點移動到起點(75, 40),然后使用bezierCurveTo()
畫出了一個半圓形。重復這個過程,在畫布上畫出了另一半圓形以及兩條直線。最后使用fillStyle
來設置顏色,并使用fill()
填充路徑。
想要制作小一點的桃心怎么辦?我們只需要調整bezierCurveTo()
中的參數即可。例如:
ctx.moveTo(50, 25); ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 50, 120); ctx.bezierCurveTo(60, 102, 80, 80, 80, 62.5); ctx.bezierCurveTo(80, 50, 75, 37, 60, 25); ctx.fillStyle = "pink"; ctx.fill();
我們只需要將第一個bezierCurveTo()
的起點改為(50, 25),最后一個bezierCurveTo()
重點改為(60, 25)即可。這樣就可以畫出一個小一點的桃心。
通過這個例子,我們可以看到JavaScript可以輕松地制作出各種形狀,包括桃心。這是JavaScript在網頁開發中的一個小例子,但也印證了JavaScript的表現力和方便性。