使用canvas实现雪花飘动效果代码示例
时间:2022-06-25 17:52:19 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下使用canvas实现雪花飘动效果代码示例,文章介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
一、canvas是什么?
HTML5
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
二、canvas的基本用法
1.创建一个画布(Canvas)
1 | < canvas id = "myCanvas" ></ canvas > |
2.使用JavaScript绘制图像
1 2 3 4 5 6 7 8 | //首先找到<canvas>元素 var c=document.getElementById( "myCanvas" ); //然后创建context对象 var ctx=c.getContext( "2d" ); //下面的两行代码绘制一个红色的矩形: ctx.fillStyle= "#FF0000" ; ctx.fillRect(0,0,150,75); </canvas> |
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000。
3.Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
ctx.fillRect(0,0,150,75);
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
4.Canvas - 路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:
1 | arc(x,y,r,start,stop) |
使用arc() 画一个圆
1 2 3 4 5 | var c=document.getElementById( "myCanvas" ); var ctx=c.getContext( "2d" ); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); |
三、实现雪花飘动的思路
1.创建一个画布(Canvas)
1 2 3 4 5 6 7 8 9 | var canvas =document.getElementById( "canvas" ) //参数 contextID 指定了您想要在画布上绘制的类型。 //当前唯一的合法值是 "2d",它指定了二维绘图, //并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。 var context = canvas.getContext( "2d" ) var w =window.innerWidth var h =window.innerHeight canvas.width = w; canvas.height =h; |
2.创建雪花的对象数组
1 2 3 4 5 6 7 8 9 | var count =200 //雪花的个数 var snows=[] //雪花对象数组 for ( var i=0 ; i< count;i++){ snows.push({ x:Math.random()*w, //Math.random()用于生成0~1的随机数 y:Math.random()*h, r:Math.random()*5, }) } |
3.绘制雪花样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | function draw(){ context.clearRect(0,0,w,h) context.beginPath() for ( var i=0; i<count;i++){ var = "" snow= "snows[i];//遍历每一片雪花" context.fillstyle= "rgb(255,255,255)" 设置雪花的样式= "" context.shadowblur= "10;" context.shadowcolor= "rgb(255,255,255)" ;= "" moveto= "" 的方法是可以移动到指定的坐标= "" context.moveto(snow.x,snow.y)= "" 使用canvas= "" arc()创建一个圆形= "" x,y,r:圆的中心的x坐标和y坐标,r为半径= "" 0,math.pi= "" *= "" 2起始弧度和结束弧度= "" context.arc(snow.x,snow.y,snow.r,0,math.pi= "" 2)= "" }= "" 画布填充= "" context.fill()= "" move()= "" }<= "" pre= "" > <p> 4.实现雪花飘动 </p> <pre class= "brush:js;" > function move(){ for ( var i=0;i<count;i++){ var = "" snow= "snows[i];" snow.y= "" += "(7-snow.r)/10" 从上往下飘落= "" snow.x+= "((5-snow.r)/10)//从左到右飘落" if (snow.y= "" >h){ snows[i]={ x:Math.random()*w, y:Math.random()*h, r:Math.random()*5, } } } }</count;i++){></pre> <p> 5.设置刷新 </p> <pre class= "brush:js;" > draw() //每毫秒刷新一次 setInterval(draw,1)</pre> <p> 6.完整代码 </p> <pre class= "brush:xhtml;" > <meta charset= "UTF-8" > <title>雪花飘飘之使用canvas元素用于在网页上绘制图形。</title> <style type= "text/<a href=" http:= "" www.111com.net= "" cssdiv= "" css.html "=" " target=" _blank ">css</a>" > *{ margin:0; padding:0; /* background-color: seagreen; */ background: url( "雪人.jpg" ) no-repeat; background-size:100% 100%; } /* .can{ filter: blur(1px); } */ </style> <canvas id= "canvas" class= "can" width= "1280" height= "720" ></canvas> <script type= "text/javascript" > //canvas 元素用于在网页上绘制图形。 var canvas =document.getElementById( "canvas" ) //参数 contextID 指定了您想要在画布上绘制的类型。 //当前唯一的合法值是 "2d",它指定了二维绘图, //并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。 var context = canvas.getContext( "2d" ) var w =window.innerWidth var h =window.innerHeight canvas.width = w; canvas.height =h; var count =200 //雪花的个数 var snows=[] //雪花对象数组 for ( var i=0 ; i< count;i++){ snows.push({ x:Math.random()*w, //Math.random()用于生成0~1的随机数 y:Math.random()*h, r:Math.random()*5, }) } //绘制雪花 function draw(){ context.clearRect(0,0,w,h) context.beginPath() for ( var i=0; i<count;i++){ var snow = snows[i]; //遍历每一片雪花 context.fillStyle = "rgb(255,255,255)" //设置雪花的样式 context.shadowBlur=10; context.shadowColor= "rgb(255,255,255)" ; //moveTo 的方法是可以移动到指定的坐标 context.moveTo(snow.x,snow.y) // 使用canvas arc()创建一个圆形 //x,y,r:圆的中心的x坐标和y坐标,r为半径 //0,Math.PI * 2起始弧度和结束弧度 context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2) } //画布填充 context.fill() move() } //雪花飘动 function move(){ for ( var i=0;i<count;i++){ var snow =snows[i]; snow.y +=(7-snow.r)/10 //从上往下飘落 snow.x+=((5-snow.r)/10) //从左到右飘落 if (snow.y>h){ snows[i]={ x:Math.random()*w, y:Math.random()*h, r:Math.random()*5, } } } } draw() //每毫秒刷新一次 setInterval(draw,1) </script> <script defer= "" src= "https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity= "sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon= "{"rayId":"8ff49d16dec1e826","version":"2024.10.5","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"09a15e901f154c8c900d5950c76ccb92","b":1}" crossorigin= "anonymous" ></script> </pre> <p align= "center" > <a href= "https://img.111cn.net/uploads/20220926/img_6331a1f168a5f30.jpg" class= "js-smartPhoto-pc" target= "_blank" ><img src= "https://img.111cn.net/uploads/20220926/img_6331a1f168a5f30.jpg" alt= "" ></a> </p> <div class= "articles" > <div class= "tit02" > <h4>相关文章</h4> </div> <ul> <li> <a target= "_blank" href= "/new/424663.htm" >以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍</a> <span>12-31</span> </li> <li> <a target= "_blank" href= "/new/424664.htm" >未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍</a> <span>12-31</span> </li> <li> <a target= "_blank" href= "/new/424662.htm" >未定事件簿左然破浪远行怎么样</a> <span>12-31</span> </li> <li> <a target= "_blank" href= "/new/424661.htm" >桃源深处有人家行医问诊怎么玩</a> <span>12-31</span> </li> <li> <a target= "_blank" href= "/new/424660.htm" >恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍</a> <span>12-31</span> </li> <li> <a target= "_blank" href= "/new/424659.htm" >阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍</a> <span>12-31</span> </li> </ul> </div> </count;i++){> |