【5.20】用 canvas 绘制一朵玫瑰

JJJiker

于 2019-05-20 14:05:17 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： canvas js

本文链接：https://blog.youkuaiyun.com/JJJikerUPUP/article/details/90373743

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用 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.47元/天解锁文章