canvas 滚动,
今天我们就用画布来实现落雪的效果。
一、canvas是什么？
HTML5 canvas元素用于绘制图形，由脚本(通常是JavaScript)完成。
画布标签只是图形容器，你必须使用脚本来绘制图形。
你可以用canvas画出路径、方框、圆圈、字符，并以多种方式添加图像。
:
二、canvas的基本用法
1.创建画布
画布ID= my canvas width= 200 height= 100 /canvas 2。使用JavaScript绘制图像
//首先找到画布元素var c=document . getelementbyid( my canvas )；//然后创建上下文对象var CTX=c . get context( 2d )；//下面两行代码画一个红色矩形：CTX . fill style= # ff 0000 ；ctx.fillRect(0，0，150，75)；getContext(2d )对象是一个内置的HTML5对象，它有许多方法来绘制路径、矩形、圆形、字符和添加图像。
设置fillStyle属性可以是CSS颜色、渐变或图案。fillStyle的默认设置是#000000。
3.画布坐标
画布是一个二维网格。
画布左上角的坐标是(0，0)
ctx.fillRect(0，0，150，75)；
上面的fillRect方法有参数(0，0，150，75)。
含义：在画布上画一个150x75的矩形，从左上角(0，0)开始。
4.画布路径
Move (x，y)定义线的起点坐标。
LineTo(x，y)定义线的终点坐标。
要在画布上画一个圆，我们将使用以下方法：
Arc(x，y，r，起点，终点)使用Arc()绘制一个圆
var c=document . getelementbyid( my canvas )；var CTX=c . get context( 2d )；CTX . begin path()；ctx.arc(95，50，40，0，2 *数学。PI)；CTX . stroke()；
三、实现雪花飘动的思路
1.创建画布
var canvas=document . getelementbyid( canvas )//参数contextID指定要在画布上绘制的类型。//目前，唯一合法的值是“2d”，它指定2D绘图，//并使此方法返回环境对象，该对象导出2D绘图API。var context=canvas . get context( 2d )var w=window . inner width var h=window . inner height canvas . width=w；canvas . height=h；2.创建雪花的对象数组
var=200//雪花数量var snows=[] //雪花对象数组for(var I=0；我数；I){ snow . push({ x:math . random()* w，//math.random()用于生成0 ~ 1的随机数y: math.random () * h，r: math.random () * 5，})} 3 .画一个雪花样式。
函数draw(){ context.clearRect(0，0，w，h)context . begin path()for(var I=0；icountI){ var snow=snows[I]；//遍历每个雪花上下文. fillstyle= RGB (255，255，255)//设置雪花样式上下文. shadow blur=10；context.shadowColor=rgb(255，255，255)；//moveTo的方法是可以移动到指定的坐标context.moveto (snow.x，snow . y)//用canvas arc()创建一个圆。//x，y，r:圆心的x坐标和y坐标，r为半径//0，数学。PI * 2起始弧度和结束弧度context.arc(snow.x Snow.y，snow.r，0，Math。PI * 2)} //画布填充context.fill() move() }4。实现雪花飘飘
函数move(){ for(var I=0；icountI){ var snow=snows[I]；Snow.y=(7-snow.r)/10 //自上而下下落snow.x=((5-snow.r)/10)//自左而右下落if(snow . yh){ snow[I]={ x:math . random()*
Draw() //每毫秒刷新setInterval (draw，1)6次。完全码
！文档类型html html lang= en head meta charset= UTF-8 标题雪花飘飘之使用帆布元素用于在网页上绘制图形/title style type= text/CSS * { margin:0；填充：0;/*背景色：海绿色；*/background: url(雪人. jpg’)不重复；背景尺寸：100% 100%;} /* .可以{滤镜：模糊(1px)；} *//style/head body canvas id= canvas class= can /canvas脚本类型= text/JavaScript //canvas元素用于在网页上绘制图形var canvas=文档。getelementbyid( canvas )//参数帮助文件指定了您想要在画布上绘制的类型。 //当前唯一的合法值是2d ，它指定了二维绘图， //并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。var context=画布。获取上下文( 2d )变量w=window。内部宽度变化h=窗户。内高帆布。宽度=w；画布。高度=h；var count=200 //雪花的个数var snows=[] //雪花对象数组for(var I=0；我数；我){下雪了。推({ x:数学。random()* w，//Math.random()用于生成0~1的随机数y:Math.random()*h，r:Math.random()*5，}) } //绘制雪花函数draw(){ context.clearRect(0，0，w，h)上下文。的开始路径()(var I=0；icountI){ var snow=snows[I]；//遍历每一片雪花context.fillStyle=rgb(255，255，255) //设置雪花的样式context . shadow blur=10 context . shadow color= RGB(255，255，255)；//moveTo的方法是可以移动到指定的坐标context.moveTo(snow.x，snow.y) //使用画布弧()创建一个圆形//x，y，r:圆的中心的x坐标和y坐标，r为半径//0,数学。圆周率* 2起始弧度和结束弧度context.arc(snow.x，snow.y，snow.r，0，Math .PI * 2) } //画布填充context.fill() move() } //雪花飘动函数move(){ for(var I=0；icountI){ var snow=snows[I]；snow.y=(7-snow.r)/10 //从上往下飘落snow.x=((5-snow.r)/10)//从左到右飘落如果(雪。yh){ snows[I]={ x:数学。random()* w，y:Math.random()*h，r:Math.random()*5，} } } } draw() //每毫秒刷新一次setInterval(draw，1) /script/body/html
总结
到此这篇关于使用帆布实现雪花飘动效果的示例代码的文章就介绍到这了，更多相关帆布雪花飘动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。