html5canvas中波浪线怎么画,html5 canvas画波浪
要实现这样的动画普通的CSS3是鞭长莫及了,只能使用Canvas。好在使用canvas也非常简单。
Step1.
新建一个画布()元素,并放在所有按钮和logo的下方以免遮挡前面的元素。
将Canvas的宽高设定成其父元素的宽高,以充满他的父元素。也可以直接使用windows.innerHeight,windows.innerWidth。使其充满整个屏幕。
var canvas =
document.getElementByIdx_x('canvas');
var ctx =
canvas.getContext('2d');
canvas.width =
canvas.parentNode.offsetWidth;
canvas.height =
canvas.parentNode.offsetHeight;
Step2.
在画布中画一个充满半个屏幕的矩形。
我们只需要找到矩形的四个定点的坐标,使用Canvas的绘制路径并填充这个路径。四个点分别是:
(0, 画布高度t/2)
(画布宽度, 画布高度t/2)
(画布宽度 画布高度t/2)
(0, 画布高度t/2)
注意:坐标的(0,0)在画布的左上角。
//填充颜色
ctx.fillStyle = "rgba(0,222,255, 0.2)";
//开始绘制路径
ctx.beginPath();
//左上角
ctx.moveTo(0, canvas.height/2);
//右上角
ctx.lineTo(canvas.width, canvas.height/2);
//右下角
ctx.lineTo(canvas.width, canvas.height);
//左下角
ctx.lineTo(0, canvas.height);
//左上角
ctx.lineTo(0, canvas.height/2);
//闭合路径
ctx.closePath();
//填充路径
ctx.fill();
运行代码:
Step3.
让矩形动起来。要做动画我们需要持续的清空画布并重新绘制新的矩形,就像电影每秒播放24张图片。我们新建一个loop函数,用来绘制每一帧的图像,并使用requestAnimFrame来告诉浏览器每一帧都要使用loop来绘制。
//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
window.requestAnimFrame = (function(){
return
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame
||
window.mozRequestAnimationFrame||
function(
callback ){
window.setTimeout(callback,
1000 / 60);
};
})();
function loop(){
requestAnimFrame(loop);
}
loop();
把之前绘制矩形的代码放到loop中,并在绘制矩形的代码之前清空画布中所有的图形。
function loop(){
//清空canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
//绘制矩形
ctx.fillStyle =
"rgba(0,222,255, 0.2)";
ctx.beginPath();
ctx.moveTo(0,
canvas.height/2);
ctx.lineTo(canvas.width,
canvas.height/2);
ctx.lineTo(canvas.width,
canvas.height);
ctx.lineTo(0,
canvas.height);
ctx.lineTo(0,
canvas.height/2);
ctx.closePath();
ctx.fill();
requestAnimFrame(loop);
}
接下来我们更改每一帧中的矩形的高度来模拟波浪的形态,波浪其实是在波峰与波谷之间做周期性运动。我们假设波峰与波谷间都是50px,那么矩形的高度的变化值应该在-50px到50px之间。为了达到周期性的效果我们采用正弦函数sin(x),因为不管x值怎么变化sin(x)的值始终在-1与1之间。我们新建一个变量
var step =0
使其在每一帧中自增,表示每一帧角度增加一度,并用Math.sin()取他的正弦值。JS中的sin使用的弧度值,我们需要把step转换成弧度值,var
angle = step*Math.PI/180;
取角度的正弦值乘以50得到了矩形高度的变化量。将变化量加在矩形的左上与右上两个顶点的y坐标上。
//初始角度为0
var step = 0;
function loop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle =
"rgba(0,222,255, 0.2)";
//角度增加一度
step++;
//角度转换成弧度
var angle =
step*Math.PI/180;
//矩形高度的变化量
var deltaHeight =
Math.sin(angle) * 50;
ctx.beginPath();
//在矩形的左上与右上两个顶点加上高度变化量
ctx.moveTo(0,
canvas.height/2+deltaHeight);
ctx.lineTo(canvas.width,
canvas.height/2+deltaHeight);
ctx.lineTo(canvas.width,
canvas.height);
ctx.lineTo(0,
canvas.height);
ctx.lineTo(0,
canvas.height/2+deltaHeight);
ctx.closePath();
ctx.fill();
requestAnimFrame(loop);
}
运行代码:
将右上顶点的变化值改为角度的余弦,使其左右不同步。var deltaHeightRight = Math.cos(angle)
* 50;
//初始角度为0
var step = 0;
function loop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle =
"rgba(0,222,255, 0.2)";
//角度增加一度
step++;
//角度转换成弧度
var angle =
step*Math.PI/180;
//矩形高度的变化量
var deltaHeight =
Math.sin(angle) * 50;
//矩形高度的变化量(右上顶点)
var deltaHeightRight =
Math.cos(angle) * 50;
ctx.beginPath();
ctx.moveTo(0,
canvas.height/2+deltaHeight);
//右上顶点
ctx.lineTo(canvas.width,
canvas.height/2+deltaHeightRight);
ctx.lineTo(canvas.width,
canvas.height);
ctx.lineTo(0,
canvas.height);
ctx.lineTo(0,
canvas.height/2+deltaHeight);
ctx.closePath();
ctx.fill();
requestAnimFrame(loop);
}
运行代码:
Step4
将矩形的顶上的边变成曲线。
在上面的代码中我们用lineTo来绘制矩形的边,为了要绘制曲线我们需要
bezierCurveTo(cpX1, cpY1,
cpX2, cpY2, x, y)
函数。绘制的起点是矩形的左上顶点,结束点为右上顶点。bezierCurveTo函数的参数中(cpX1,cpY1)与(cpX2,cpY2)分别是起点
与结束点的控制点,(x,y)为结束点。我们将两个控制点的x值设定在画布的正中心,y值在起始点与终点的y值上面减去50;
(canvas.width /2,
canvas.height/2+deltaHeight-50),(canvas.width /
2,canvas.height/2+deltaHeightRight-50),
可以根据效果调整。
ctx.beginPath();
ctx.moveTo(0,
canvas.height/2+deltaHeight);
//ctx.lineTo(canvas.width,
canvas.height/2+deltaHeightRight);
//画曲线
ctx.bezierCurveTo(canvas.width
/2, canvas.height/2+deltaHeight-50, canvas.width / 2,
canvas.height/2+deltaHeightRight-50,
canvas.width, canvas.height/2+deltaHeightRight);
ctx.lineTo(canvas.width,
canvas.height);
ctx.lineTo(0,
canvas.height);
ctx.lineTo(0,
canvas.height/2+deltaHeight);
ctx.closePath();
运行代码
Step5
一个波浪画好了。我们只需要同时画3个不同颜色的波浪,并且使不同波浪的角度不同就可以得到效果图中的效果了。
//定义三条不同波浪的颜色
var lines = ["rgba(0,222,255,
0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"];
function loop(){
ctx.clearRect(0,0,canvas.width,canvas.height);
step++;
//画3个不同颜色的矩形
for(var j =
lines.length - 1; j >= 0; j--) {
ctx.fillStyle
= lines[j];
//每个矩形的角度都不同,每个之间相差45度
var
angle = (step+j*45)*Math.PI/180;
var
deltaHeight = Math.sin(angle) * 50;
var
deltaHeightRight = Math.cos(angle) * 50;
ctx.beginPath();
ctx.moveTo(0,
canvas.height/2+deltaHeight);
ctx.bezierCurveTo(canvas.width
/2, canvas.height/2+deltaHeight-50, canvas.width / 2,
canvas.height/2+deltaHeightRight-50,
canvas.width, canvas.height/2+deltaHeightRight);
ctx.lineTo(canvas.width,
canvas.height);
ctx.lineTo(0,
canvas.height);
ctx.lineTo(0,
canvas.height/2+deltaHeight);
ctx.closePath();
ctx.fill();
}
requestAnimFrame(loop);
}
运行代码:
Step6
添加好按钮与logo的HTML代码就大功告成了。
html5canvas中波浪线怎么画,html5 canvas画波浪相关推荐
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
- html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
- html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
- php加波浪线不解析,给文字加波浪线效果
这次给大家带来给文字加波浪线效果,给文字加波浪线效果的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 css的设计之巧妙,实现之精妙,细细寻味,其妙非凡,妙不可言.这波浪线,取巧的运用了lin ...
- 毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
- Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
- 毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
- 如何用viso画波浪线、以及带箭头的波浪线。
如何用viso画波浪线.带箭头的波浪线!!! 搜索过来搜索过去,还是没有找到一个令自己满意的答案,就自己写一个过程了. 首先我使用的是visio 2013版本. 方法一: 打开visio,新建一个基本 ...
最新文章
- 虚拟服务器的运行原理,虚拟机复制的工作原理
- VS 配置外部DLL的引用路径【可执行文件的环境路径】
- 高级数据结构与算法 | AVL树 (高度平衡树)
- 0pencv——图像腐蚀
- [有限元] 刚度矩阵每一行的元素之和为零的条件
- jquery微博实例
- python仿真搭建_mock搭建——python——搭建一个简单的mock服务——简单版本
- nodejs实践录:pm2实验测试记录
- 数据分析--商业报告实例
- java绘制有向图_AcWing 848. 有向图的拓扑序列 Java
- ps怎么一下选中多个图层_ps新手入门之蒙版工具
- 应用数据挖掘进行客户关系管理
- Python杂记-set()
- C#获取字符串中某个字符出现的次数
- hibernate java.util.date 精度_hibernate中java.util.Date类型映射
- 浏览器请求头 request headers转换为字典小工具
- QT5.14.2+VS2019安装配置教程Windows
- laydate使用官方使用方法
- MonthCalendar
- 云计算供应商在合同谈判时可能拒绝的三个事项以及要求
热门文章
- 浅析linuxnbsp;2.6.23驱动注册函数driv…
- stm32 19个exti line分别对应哪些中断
- 基于opencv+python实现数独
- Matlab .asv是什么文件
- 自媒体运营一定要知道的8个工具网站
- 95后,踏入职场3载年薪50W+ ,完胜众人的,从来不是年龄.......
- 使用EMQX搭建MQTT服务器,实现设备的通信(1)
- 我所理解的iOS开发高手
- 怎么给Win10分屏?
- 看完这个文章就可以对 ArrayList 有自己的见解了