web前端-动画图形
JinmyHe
每天记录一点滴
展开
-
svg动态科技元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>科技.原创 2020-08-17 16:02:27 · 796 阅读 · 0 评论 -
svg成功失败图标动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sv.原创 2020-07-21 17:25:33 · 964 阅读 · 0 评论 -
svg stroke按钮路径动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>An.原创 2020-07-21 16:24:32 · 334 阅读 · 0 评论 -
anime插件 酷炫效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-07-21 10:33:57 · 712 阅读 · 0 评论 -
CSS3酷炫加载动画
<style> *{ margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; padding-top: 50px; background: #000; } .load { position: relative; width: 150px; height: 150px;.原创 2020-07-02 14:43:43 · 315 阅读 · 0 评论 -
canvas-图案文字
<canvas id="canvas" width="500" height="300" style="border: 1px dashed gray;"></canvas><script type="text/javascript"> function $$(id) { return document.getElementById(id); } window.onload = function () { var .原创 2020-07-02 12:02:16 · 231 阅读 · 0 评论 -
svg简单动画
<style> .ball3 { animation: second-animation 2s 2s infinite alternate ease-in-out forwards; } @keyframes second-animation { 0% { fill:blue; transform:translateX(0); } 50% { fill:purple; transform:translateX(50x)...原创 2020-06-18 23:12:28 · 203 阅读 · 0 评论 -
canvas创建阴影
我们可以使用4个参数给画布上的形状添加阴影。shadowOffsetXshadowOffsetYshadowBlurshadowColor例子:给对象添加阴影<!DOCTYPE HTML><html lang="cn"><head> <meta charset="utf-8"> <title&am原创 2018-09-19 21:53:52 · 313 阅读 · 0 评论 -
canvas基本矩形
绘制矩形有3种不同的方式:填充,搭边或清除。当然,创建矩形还可以使用路径。实现这3种 操作的API函数如下:fillRect(x,y,width,height)在位置(x,y)处以宽为width,高为height绘制一个填充的矩形 strokeRect(x,y,width,height)在位置(x,y)处以宽为width,高为height绘制一个矩形边框。它需要使用当前...原创 2018-09-11 11:10:38 · 277 阅读 · 0 评论 -
一个简单的canvas案例
canvas的流程:1.检测widow是否加载完成2.检测是否支持canvas,有3种方法,案例用第3种:使用引入modernizr.js,到官网www.modernizr.com下载3.创建画布实例,获取2D上下文4.drawScreen()5.标签元素<canvas id="canvas" width="500" height="400"> ...</ca...原创 2018-09-11 10:17:36 · 2741 阅读 · 0 评论 -
canvas高级路径方法
接下来深入探讨一下其他绘制路径的方法,包括弧线和曲线,以组合成复杂的图像。一、弧线有4种函数可以绘制弧线和曲线,以组合成复杂的图像。1.context.arc()context.acr(x,y,radius,startAngle,endAngle,anticlockwise)x和y定义圆心的位置 ,radius定义弧线的半径,startAngle,endAngle使用弧度值,...原创 2018-09-16 22:27:06 · 900 阅读 · 0 评论 -
canvas基本要点
1.监听器 addEventListener()有3个参数:事件load事件处理器函数:eventWindowLoaded()useCaputre: true 或false下用是用来测试window是否加载完毕的最终代码: window.addEventListener("load",eventWindowLoaded,false); function eventW...原创 2018-09-08 01:22:59 · 168 阅读 · 0 评论 -
h5动画工具推荐
1.Animate.css 一款强大的预设css3动画库 https://daneden.github.io/animate.css/2.Granim用于快速创建 WEB 内的令人叹为观止的渐变动画 https://sarcadass.github.io/granim.js/3.Animsition过渡动画库 http://git.blivesta.com/animsition...原创 2018-09-07 00:12:06 · 4621 阅读 · 0 评论 -
一个Canvans合成的简单例子
<!DOCTYPE HTML><html lang="cn"><head> <meta charset="utf-8"> <title>canvans</title> <script src="modernizr-custom.js"&a原创 2018-09-17 17:31:45 · 1249 阅读 · 0 评论 -
canvas简单画布变换
画布变换是指用数学方法调整所绘形状的物理属性。缩放和旋转是常用的两个形状变换。<!DOCTYPE HTML><html lang="cn"><head> <meta charset="utf-8"> <title>canvans</title> <scr原创 2018-09-19 02:54:22 · 392 阅读 · 0 评论 -
canvas 用颜色和渐变填充对象
context.fillStyle = 'red';(1)以rgb()方法设置颜色:context.fillStyle = rgb(255,0,0);(2)以十六进制数字字符串设置填充色context.fillStyle = "#ffffff";(3)以rgba()方法设置填充色context.fillStyle = rgba(255,0,0,1);例子1:线性...原创 2018-09-19 21:46:33 · 447 阅读 · 0 评论 -
Canvans使用路径创建线段
路径可以用来在画布上绘制任何形状。路径就是一系列点及这些点间的连线。Canvas上下文只能有一个“当前”路径。当调用context.save()方法时,不会将它储存为当前绘图状态的一部分。设置路径的开始和结束:调用beginPath()函数开始一个路径,调用closePath()函数结束一个路径。连接路径内的两个点的路径称为子路径。如果终点与起点相连,子路径即成为封闭路径。最基本的路径通过...原创 2018-09-14 14:19:09 · 694 阅读 · 0 评论 -
HTML 5 Canvas 的属性
HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。颜色、样式和阴影属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 ...原创 2018-09-14 13:57:07 · 1733 阅读 · 0 评论 -
echarts使用方法
介绍一下我们制作echarts图表的过程,只需要简单两步:1.引入 ECharts<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"&a原创 2018-07-12 11:54:48 · 817 阅读 · 0 评论