【5.20】用 canvas 绘制一朵玫瑰

本文是在5.20这个特殊日子,博主分享了一段使用canvas绘制玫瑰的JavaScript代码,旨在作为一个浪漫的礼物想法。虽然博主感叹没有可以赠送的人,但鼓励读者可以用此代码去表达心意。文章附带了绘制效果的截图。
摘要由CSDN通过智能技术生成

用 canvas 绘制一朵玫瑰

今天是5月20日,博主突然想到以前照着网上的教程用 canvas 画的一幅玫瑰,现在在这里贴出代码,供大家参考

悲催的是博主有了玫瑰,却还没有赠与的人儿 呜呜呜~~

代码如下:

<html>
	<head>
		<meta charset="UTF-8">
		<title>玫瑰花</title>
		<style type="text/css">
			body {
				background-color: coral;
			}

			#shusheng {
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
			}

			#f {
				font-size: 24px;
				font-weight: block;
				color: mediumblue;
				font-family: "楷体";
			}
		</style>
		<script type="text/javascript">
			var name = "送你一朵玫瑰啊";
			alert(name);
		</script>
	</head>

	<body>
		<div style="text-align: center">
			<h1 id="f">
				日高闲步下堂阶 细草春莎没绣鞋 折得玫瑰花一朵 凭君簪向凤凰钗
			</h1>
		</div>
		<div id="shusheng">
			<ca
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然,我可以帮你实现一个使用 canvas 绘制玫瑰花的方法。以下是一个简单的示例代码: ```javascript function drawRose(ctx, centerX, centerY, numPetals, petalLength, petalWidth) { ctx.beginPath(); ctx.translate(centerX, centerY); ctx.moveTo(0, 0); for (let i = 0; i < numPetals * 2; i++) { ctx.rotate(Math.PI / numPetals); if (i % 2 === 0) { ctx.bezierCurveTo( petalLength / 2, petalWidth / 2, petalLength, -petalWidth / 2, petalLength, 0 ); } else { ctx.bezierCurveTo( petalLength / 2, -petalWidth / 2, petalLength, petalWidth / 2, petalLength, 0 ); } } ctx.closePath(); ctx.fillStyle = 'red'; ctx.fill(); } // 使用示例 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); drawRose(ctx, canvas.width / 2, canvas.height / 2, 5, 100, 20); ``` 在这个示例中,我们定义了一个名为 `drawRose` 的方法,它接受以下参数: - `ctx`:canvas 的上下文对象。 - `centerX` 和 `centerY`:玫瑰花的中心点坐标。 - `numPetals`:玫瑰花的花瓣数量。 - `petalLength` 和 `petalWidth`:花瓣的长度和宽度。 在方法内部,我们使用 `ctx.beginPath()` 开始绘制路径,并使用 `ctx.moveTo(0, 0)` 将起始点设置为原点。 然后,我们使用一个循环来绘制花瓣。在每次迭代中,我们使用 `ctx.rotate()` 方法旋转画布,然后根据迭代次数的奇偶性使用 `ctx.bezierCurveTo()` 方法绘制花瓣的曲线路径。 最后,我们使用 `ctx.closePath()` 闭合路径,并使用 `ctx.fillStyle` 设置填充颜色为红色。你可以根据需要修改填充颜色或其他样式属性。 在示例的最后,我们获取 canvas 元素和上下文对象,并调用 `drawRose` 方法来绘制玫瑰花。 希望这个示例能满足你的需求!如果有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值