Canvas随机生成矩形和直线

最新推荐文章于 2022-02-22 00:59:03 发布

weixin_43778617

最新推荐文章于 2022-02-22 00:59:03 发布

阅读量494

点赞数 1

分类专栏： Canvas 代码记录文章标签： Canvas

本文链接：https://blog.csdn.net/weixin_43778617/article/details/102662262

版权

Canvas随机生成矩形和直线

CSS部分：

<style type="text/css">
	#cans{
			border: 1px solid red;
		}
		#btn{
			border:1p solid red;
		}
</style>

JavaScript部分：

<body>
		<canvas id="cans" width="800" height="600"></canvas>	
		<br />
		<input type="button" name="" id="btn" value="点击生成"/>
		<script type="text/javascript">
			var cans=document.getElementById("cans");
			var context=cans.getContext("2d");
			var btn=document.getElementById("btn");
			btn.onclick=function(){
				var ran=Math.floor(Math.random()*2);
				if(ran==1){
					butt();
				}else{
					lineran();
				}
			}
			//随机生成矩形
			function butt(){
            //定义x轴，y轴，宽高，rgb颜色的随机值,透明度a
                var x = Math.fl

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_43778617

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas随机生成矩形和直线

Canvas随机生成矩形和直线CSS部分：<style type="text/css"> #cans{ border: 1px solid red; } #btn{ border:1p solid red; }</style>JavaScript部分：<body> <canvas id="cans" width="...
复制链接

扫一扫