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

关注

原创最新推荐文章于 2026-06-12 10:00:28 发布 581 阅读 AI 写同款· GEO 优化 ›

P5.js入门这段时间上互动媒体技术的课，接触到p5.js编程，老师很给力，他把教程写成了优快云的博客，他写得很基础，没有什么编程基础的同学也可以看得懂的。然后可能是因为自己有一定的编程基础，看着他的教程就觉得很简单，看完他的教程，感觉还是不错的。一共看了他的9篇教程，1.1—1.9，在这里贴上1.1，也就是入门第一篇教程吧，大家想入门p5.js可以去看，教程：开始第一幅“码绘”！那大家可能会说，都已经把... 阅读详情

效果图没有上传成功：

优快云对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>

收录于