HTML5動態玫瑰花代碼

在HTML5中，我們可以使用Canvas來繪制2D圖形。動態的玫瑰花就是用Canvas繪制的。

<canvas id="rose" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('rose');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var x = width / 2;
var y = height / 2;
var radius = 200;
var petals = 10;
var offset = Math.PI / (petals * 2);
var angle = 0;
var strokeStyle = 'black';
var lineWidth = 2;
var fillColor = 'red';
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillColor;
for(var i = 0; i< petals; i++) {
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var startX = x + radius * cos;
var startY = y + radius * sin;
var control1X = x + radius / 2 * cos;
var control1Y = y + radius / 2 * sin;
angle += offset;
cos = Math.cos(angle);
sin = Math.sin(angle);
var control2X = x + radius / 2 * cos;
var control2Y = y + radius / 2 * sin;
var endX = x + radius * cos;
var endY = y + radius * sin;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
ctx.bezierCurveTo(control2X, control2Y, control1X, control1Y, startX, startY);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
</script>

這是一段簡單的HTML5玫瑰花的代碼。我們首先創建了一個canvas元素，并獲取它的2D上下文。我們設置玫瑰花的屬性：半徑、花瓣數、描邊顏色、描邊寬度、填充顏色。接下來，我們使用bezierCurveTo()方法來繪制花瓣。bezierCurveTo()方法是Canvas的二次貝塞爾曲線繪制方法，它需要一個起始點、兩個控制點和一個結束點。通過控制點的移動，我們可以創建出美麗的曲線，從而繪制出花瓣形狀。