用HTML5 + JavaScript绘制花、树
在HTML5中，可以使用<canvas>元素来绘制图形。以下是使用JavaScript在<canvas>元素中绘制一个简单花卉图案的示例代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="250" height="250" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制花卉
function drawFlower(centerX, centerY, radius, petals, color) {
ctx.beginPath();
ctx.moveTo(centerX, centerY);
for (var i = 0; i < petals; i++) {
var radians = (i / petals) * 2 * Math.PI;
var newX = centerX + Math.cos(radians) * radius;
var newY = centerY + Math.sin(radians) * radius;
ctx.lineTo(newX, newY);
}
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
// 调用函数绘制花卉
drawFlower(125, 125, 50, 5, 'pink');
</script>
</body>
</html>这段代码定义了一个drawFlower函数，它接受中心点坐标centerX, centerY，花瓣半径radius，花瓣数量petals，以及颜色color作为参数，并绘制出一个五角星形的花卉。你可以根据需要调整参数来绘制不同大小和形状的花卉。
评论已关闭