小编给大家分享一下如何使用canvas轻松实现黑客帝国炫酷代码雨,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司主营浏阳网站建设的网络公司,主营网站建设方案,成都app软件开发,浏阳h5成都小程序开发搭建,浏阳网站营销推广欢迎浏阳等地区企业咨询
2.1 什么是 canvas标签?
2.1.1 创建一个画布(Canvas)
你的浏览器不支持canvas
也可以使用 css 属性来设置宽高,但是如宽高属性和初始比例不一致,会出现扭曲。由于某些较老的浏览器(尤其是 IE9 之前的 IE 浏览器)或者浏览器不支持 HTML 元素
支持
2.1.2 使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须通过 JavaScript 来完成。
绘制步骤:
1 找到
var c=document.getElementById("myCanvas");
2 创建 context 对象:
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3 绘制红色矩形
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
fillStyle属性可以设置CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
2.1.3 Canvas 坐标
canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)。上面的 fillRect (0,0,150,75) 方法意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
2.1.4 需要用到的canvas 属性和方法详解
fillStyle 属性:
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
context.fillStyle=color|gradient|pattern;
值 | 描述 |
---|---|
color | 绘图填充色的 颜色。默认值是 #000000。 |
gradient | 填充绘图的渐变对象(线性或 放射性)。 |
pattern | 用于填充绘图的 pattern 对象。 |
font 属性:
font 属性设置或返回画布上文本内容的当前字体属性。
font 属性使用的语法与 css中的font属性 相同。
context.font="italic small-caps bold 12px arial";
值 | 描述 |
---|---|
font-style | 规定字体样式。可能的值:
|
font-variant | 规定字体变体。可能的值:
|
font-weight | 规定字体的粗细。可能的值:
|
font-size/line-height | 规定字号和行高,以像素计。 |
font-family | 规定字体系列。 |
caption | 使用标题控件的字体(比如按钮、下拉列表等)。 |
icon | 使用用于标记图标的字体。 |
menu | 使用用于菜单中的字体(下拉列表和菜单列表)。 |
message-box | 使用用于对话框中的字体。 |
small-caption | 使用用于标记小型控件的字体。 |
status-bar | 使用用于窗口状态栏中的字体。 |
fillText() 方法:
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
context.fillText(text,x,y,maxWidth);
参数 | 描述 |
---|---|
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。 |
fillRect() 方法:
fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。
context.fillRect(x,y,width,height);
参数 | 描述 |
---|---|
x | 矩形左上角的 x 坐标。 |
y | 矩形左上角的 y 坐标。 |
width | 矩形的宽度,以像素计。 |
height | 矩形的高度,以像素计。 |
floor() 方法返回小于等于x的最大整数。如果传递的参数是一个整数,该值不变。
Math.floor(x)
random() 方法可返回介于 0(包含) ~ 1(不包含) 之间的一个随机数。
Math.random()
例如获取 1 到 10 之间的一个随机数我们可以这样写:
Math.floor((Math.random()*10)+1);
ceil() 方法可对一个数进行上舍入。如果参数是一个整数,该值不变。ceil() 方法执行的是向上取整计算,它返回的是大于或等于函数参数,并且与之最接近的整数。
Math.ceil(x)
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作clearInterval() 方法的参数。
setInterval(code, milliseconds); setInterval(function, milliseconds, param1, param2, ...)
参数 | 描述 |
---|---|
code/function | 必需。要调用一个代码串,也可以是一个函数。 |
milliseconds | 必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。 |
param1, param2, ... | 可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。 |
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
注意:使用 outerWidth 和 outerHeight 属性获取的是加上工具条与滚动条窗口的宽度与高度。
获取:
window.innerWidth window.innerHeight
设置:
window.innerWidth=pixels window.innerHeight=pixels
代码雨炫酷效果:公众号AlbertYang 你的浏览器不支持canvas
以上是“如何使用canvas轻松实现黑客帝国炫酷代码雨”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!