使用p5.js绘制一个“禁止通行”标志

CodingIsFun

于 2019-01-24 17:00:51 发布

阅读量495

点赞数

分类专栏： HTML CSS Javascript

本文链接：https://blog.youkuaiyun.com/CodingIsFun/article/details/86629879

版权

CSS 同时被 3 个专栏收录

25 篇文章

订阅专栏

Javascript

20 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

本文介绍如何使用p5.js库在网页上绘制一个简单的禁止通行图标，包括设置画布、绘制圆形、长方形及添加文字的过程。

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

效果图没有上传成功：

优快云对GoogleChrome的支持还不完善啊。发现了几个bug：

1. 添加个人分类标签时不能输入超过一个字符的标签

2. 不能通过复制粘贴方式上传图片（2019-01-24 17：00左右测试过）

<html>
 <head>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
   <style>
	 
	  body {
	  padding: 0;
	  margin: 0;
	  background: rgb(0);
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
			  transform: translate(-50%, -50%);
	 }
	</style>
	 
	<script>
		function setup() 
		{
		createCanvas(400, 400);
		rectMode(CENTER);
		textAlign(CENTER, CENTER);
		}
		 
		function draw() 
		{
		//设置灰色背景
		background(200);

		var diameter = 200;

		//绘制圆形
		fill(237, 34, 93);
		noStroke();
		ellipse(width/2, height/2, diameter, diameter);

		//绘制长方形
		fill(255);
		rect(width/2, height/2, diameter*0.75, diameter*0.15);

		//显示文字
		textSize(36);
		fill(237, 34, 93);
		text("禁止通行", width/2, 330);
		}
	</script>
 </head>
 <body>
 </body>
</html>