今天我们就使用canvas来实现雪花飘落的结果❄️ 一、canvas是什么？HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚原来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 二、canvas的根本用法1.创建一个画布（Canvas） [code] <canvas id="myCanvas" width="200" height="100"></canvas> [/code]2.使用JavaScript绘制图像 [code] //起首找到<canvas>元素 var c=document.getElementById("myCanvas"); //然后创建context对象 var ctx=c.getContext("2d"); //下面的两行代码绘制一个赤色的矩形： ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); [/code]getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000。 3.Canvas 坐标 canvas 是一个二维网格。 4.Canvas - 路径 moveTo(x,y) 定义线条开始坐标 使用arc() 画一个圆 [code] var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); [/code]三、实现雪花飘动的思绪1.创建一个画布（Canvas） [code] 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;[/code]2.创建雪花的对象数组 [code] 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, }) }[/code]3.绘制雪格式式 [code] 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() }[/code]4.实现雪花飘动 [code] 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, } } } }[/code]5.设置革新 [code] draw() //每毫秒革新一次 setInterval(draw,1)[/code]6.完整代码 [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飘飘之使用canvas元素用于在网页上绘制图形。</title> <style type="text/css"> *{ margin:0; padding:0; /* background-color: seagreen; */ background: url("雪人.jpg") no-repeat; background-size:100% 100%; } /* .can{ filter: blur(1px); } */ </style> </head> <body> <canvas id="canvas" class="can"></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> </body> </html>[/code]
总结到此这篇关于使用canvas实现雪花飘动结果的示例代码的文章就介绍到这了,更多相关canvas雪花飘动内容请搜刮脚本之家从前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/768292.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:10 , Processed in 0.039723 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
