js使用canvas画五角星以及渐变色，瞎画

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>星云图</title></head><body><canvas id="canvas" style="border: 1px solid black; margin: 20px auto;"></canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas")canvas.width = 1400canvas.height = 700var a1 = canvas.getContext("2d")a1.beginPath()a1.fillStyle="#000020"a1.fillRect(0,0,1400,700)a1.stroke()for(var i=0;i<600;i++){var banjing = Math.random()*5+5var heng = Math.random()*canvas.widthvar zong = Math.random()*canvas.heightvar dushu = Math.random()*360star(a1,1,2,heng,zong,'yellow',"white",dushu)}function star(a,r,R,x,y,color,bgcolor,du){a.beginPath()for(var i=0;i<5;i++){a.lineTo(Math.cos((18+72*i-du)/180*Math.PI)*R+x,-Math.sin((18+72*i-du)/180*Math.PI)*R+y,)a.lineTo(Math.cos((54+72*i-du)/180*Math.PI)*r+x,-Math.sin((54+72*i-du)/180*Math.PI)*r+y,)}a.strokeStyle = colora.fillStyle = bgcolora.fill()a.shadowOffsetX = 0a.shadowOffsetY = 0a.shadowBlur = 20a.shadowColor = "rgb(0,0,0)"a.closePath()a.stroke()}a1.beginPath()a1.arc(1250,1650,1500,0,2*Math.PI,false)a1.strokeStyle="#000030"var jianbian = a1.createRadialGradient(700,450,0,700,200,700)jianbian.addColorStop(0.0,"#fbe3e3")jianbian.addColorStop(0.1,"#4f1603")jianbian.addColorStop(0.2,"#a25d56")jianbian.addColorStop(0.3,"#431000")jianbian.addColorStop(0.45,"#662414")jianbian.addColorStop(0.55,"#a67a6d")jianbian.addColorStop(0.6,"#5a2211")jianbian.addColorStop(0.65,"#a67a6d")jianbian.addColorStop(0.75,"#4f1603")jianbian.addColorStop(0.9,"#280a00")jianbian.addColorStop(1,"#431000")a1.fillStyle = jianbiana1.fill()a1.stroke()</script>
</html>

js使用canvas画五角星以及渐变色，瞎画相关推荐

python用matplotlib画五角星_3.用Python画五角星
原博文 2018-03-20 10:36 − import turtleimport timeimport os#def draw_square(org_x, org_y, x, y): turtle ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
用easyx画五角星_冷军画了一把破剪刀，竟然卖到了160万，被专家抨击：乱涂鸦！得奖后专家顿时不说话了...
本文转自:美术生 ID:mssxcx 最近看到一篇报道冷军画了一把破烂的剪刀卖了162.4万(天价)? 这是营销还是创作? △冷军<突变--有刺的剪刀> 这一幅破烂的剪刀中真实的剪刀静 ...
用html css实现五角星,用CSS画五角星
五角星 #star-five { margin: 50px; position: relative; display: block; color: red; width: 0; height: 0; ...
python画五角星代码_Python GUI 编程tkinter--画五角星和简单的动画制作
1.利用Python的tkinter画一个五角星: 2.做一个简单的动画分析五角心的五个顶点的坐标: 确立五角星的中心点和半径,再确立五角星的五个角的坐标信息,其中五角星的各个角读书为36度,具体的 ...

js使用canvas画五角星以及渐变色，瞎画

js使用canvas画五角星以及渐变色，瞎画相关推荐

最新文章

热门文章