用canvas画七彩虹伞

彩虹小伞效果图如下:
用canvas画七彩虹伞
代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业1</title>
<style>
#canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 100px auto;
}
</style>
</head>

<body>
<canvas id="canvas" width="500" height="800"></canvas>
<script>
var canvas = document.getElementById("canvas");
var pen = canvas.getContext("2d");
// 彩虹七色小伞
var rainbow = ["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#871F78"]
for (var i = 0; i < 7; i++) {
pen.fillStyle = pen.strokeStyle = rainbow[i];
// 伞盖
pen.beginPath();
pen.arc(30 + 70 * i, 140, 30, Math.PI, 2 * Math.PI);
pen.closePath();
pen.fill();
// 伞柄
pen.beginPath();
pen.moveTo(30 + 70 * i, 140);
pen.lineTo(30 + 70 * i, 187);
pen.closePath();
pen.stroke();
// 伞把
pen.beginPath();
pen.arc(26 + 70 * i, 187, 4, 0, Math.PI);
pen.stroke();
}
// 随机变颜色的七个小伞
// setInterval(function () {
// for (var i = 0; i < 7; i++) {
// pen.fillStyle = pen.strokeStyle = randomColor();
// // 伞盖
// pen.beginPath();
// pen.arc(30 + 70 * i, 40, 30, Math.PI, 2 * Math.PI);
// pen.closePath();
// pen.fill();
// // 伞柄
// pen.beginPath();
// pen.moveTo(30 + 70 * i, 40);
// pen.lineTo(30 + 70 * i, 87);
// pen.closePath();
// pen.stroke();
// // 伞把
// pen.beginPath();
// pen.arc(26 + 70 * i, 87, 4, 0, Math.PI);
// pen.stroke();
// }
// }, 1000)

// 生成随机颜色的方法
function randomColor() {
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
var c = ''
for (var i = 0; i < 6; i++) {
c += arr[Math.round(Math.random() * 15)]
}
return "#" + c;
}
</script>
</body>

</html>

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

用canvas画七彩虹伞

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 用canvas画七彩虹伞
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏