html5中动态效果代码（html文字动态特效代码）

本篇文章给大家谈谈html5中动态效果代码，以及html文字动态特效代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、HTML5用canvas怎么实现动画效果
• 2、如何用html5 canvas绘制地图四周发散的动态效果
• 3、html5 canvas首屏自适应背景动画循环效果怎么插入
• 4、如何给html页面添加动态等待效果
• 5、html5实现动态图

HTML5用canvas怎么实现动画效果

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5

Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript

函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，

另外一个参数代表间隔时间，单位为毫秒数。代码示例：

setTimeout(

update,

1000/30);

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage,

offw,

offh,

width,height,

x2,

y2,

width,

height);

其中offw,

offh是指源图像的起始坐标点，width,

height表示源图像的宽与高，x2,y2表

示源图像在目标Canvas上的起始坐标点。

!DOCTYPE

html

html

head

meta

http-equiv="X-UA-Compatible"

content="chrome=IE8"

meta

http-equiv="Content-type"

content="text/html;charset=UTF-8"

titleCanvas

Mouse

Event

Demo/title

link

href="default.css"

rel="stylesheet"

/

script

var

ctx

=

null;

//

global

variable

2d

context

var

started

=

false;

var

mText_canvas

=

null;

var

x

=

0,

y

=0;

var

frame

=

0;

//

22

5*5

+

2

var

imageReady

=

false;

var

myImage

=

null;

var

px

=

300;

var

py

=

300;

var

x2

=

300;

var

y2

=

0;

window.onload

=

function()

{

var

canvas

=

document.getElementById("animation_canvas");

console.log(canvas.parentNode.clientWidth);

canvas.width

=

canvas.parentNode.clientWidth;

canvas.height

=

canvas.parentNode.clientHeight;

if

(!canvas.getContext)

{

console.log("Canvas

not

supported.

Please

install

a

HTML5

compatible

browser.");

return;

}

//

get

2D

context

of

canvas

and

draw

rectangel

ctx

=

canvas.getContext("2d");

ctx.fillStyle="black";

ctx.fillRect(0,

0,

canvas.width,

canvas.height);

myImage

=

document.createElement('img');

myImage.src

=

"../robin.png";

myImage.onload

=

loaded();

}

function

loaded()

{

imageReady

=

true;

setTimeout(

update,

1000/30);

}

function

redraw()

{

ctx.clearRect(0,

0,

460,

460)

ctx.fillStyle="black";

ctx.fillRect(0,

0,

460,

460);

//

find

the

index

of

frames

in

image

var

height

=

myImage.naturalHeight/5;

var

width

=

myImage.naturalWidth/5;

var

row

=

Math.floor(frame

/

5);

var

col

=

frame

-

row

*

5;

var

offw

=

col

*

width;

var

offh

=

row

*

height;

//

first

robin

px

=

px

-

5;

py

=

py

-

5;

if(px

-50)

{

px

=

300;

}

if(py

-50)

{

py

=

300;

}

//var

rate

=

(frame+1)

/22;

//var

rw

=

Math.floor(rate

*

width);

//var

rh

=

Math.floor(rate

*

height);

ctx.drawImage(myImage,

offw,

offh,

width,

height,

px,

py,

width,

height);

//

second

robin

x2

=

x2

-

5;

y2

=

y2

+

5;

if(x2

-50)

{

x2

=

300;

y2

=

0;

}

ctx.drawImage(myImage,

offw,

offh,

width,

height,

x2,

y2,

width,

height);

}

function

update()

{

redraw();

frame++;

if

(frame

=

22)

frame

=

0;

setTimeout(

update,

1000/30);

}

/script

/head

body

h1HTML

Canvas

Animations

Demo

-

By

Gloomy

Fish/h1

prePlay

Animations/pre

div

id="my_painter"

canvas

id="animation_canvas"/canvas

/div

/body

/html

如何用html5 canvas绘制地图四周发散的动态效果

　我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

!DOCTYPE html

html

head

meta charset='utf-8'

title图片加载平移放大缩小示例/title

style

html,body{

margin:0px;

padding:0px;

}

canvas{

border: 1px solid #000;

}

/style

/head

body

canvas id="canvas" width="800" height="800"/canvas

script type="text/javascript" src="main.js"/script

/body

/html

var canvas,context;

function int(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

}

图片加载

创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。

var img,//图片对象

imgIsLoaded//图片是否加载完成;

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

//draw image

}

img.src="map.jpg";

}

图片绘制

绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。

var imgX,imgY,imgScale;

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

图片平移

html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。

首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件

mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少

mouseup事件发生之后，取消对mousemove以及mouseup事件监听

canvas.onmousedown=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.onmousemove=function(event){

canvas.style.cursor="move";

var pos1=windowToCanvas(canvas,event.clientX,event.clientY);

var x=pos1.x-pos.x;

var y=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.onmouseup=function(){

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.style.cursor="default";

}

}

function windowToCanvas(canvas,x,y){

var bbox = canvas.getBoundingClientRect();

return {

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

}

图片缩放

其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

var canvas,context;

var img,//图片对象

imgIsLoaded,//图片是否加载完成;

imgX=0,

imgY=0,

imgScale=1;

(function int(){

canvas=document.getElementById('canvas');

context=canvas.getContext('2d');

loadImg();

})();

function loadImg(){

img=new Image();

img.onload=function(){

imgIsLoaded=true;

drawImage();

}

img.src="map.jpg";

}

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);

}

canvas.onmousedown=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

canvas.onmousemove=function(event){

canvas.style.cursor="move";

var pos1=windowToCanvas(canvas,event.clientX,event.clientY);

var x=pos1.x-pos.x;

var y=pos1.y-pos.y;

pos=pos1;

imgX+=x;

imgY+=y;

drawImage();

}

canvas.onmouseup=function(){

canvas.onmousemove=null;

canvas.onmouseup=null;

canvas.style.cursor="default";

}

}

canvas.onmousewheel=canvas.onwheel=function(event){

var pos=windowToCanvas(canvas,event.clientX,event.clientY);

event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));

if(event.wheelDelta0){

imgScale*=2;

imgX=imgX*2-pos.x;

imgY=imgY*2-pos.y;

}else{

imgScale/=2;

imgX=imgX*0.5+pos.x*0.5;

imgY=imgY*0.5+pos.y*0.5;

}

drawImage();

}

function windowToCanvas(canvas,x,y){

var bbox = canvas.getBoundingClientRect();

return {

x:x - bbox.left - (bbox.width - canvas.width) / 2,

y:y - bbox.top - (bbox.height - canvas.height) / 2

};

html5 canvas首屏自适应背景动画循环效果怎么插入

html5 canvas首屏自适应背景动画循环效果的插入方法：

1、demo.html代码如下：

html lang="en" class="no-js"head

meta charset="UTF-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1"

titlehtml5 canvas首屏自适应背景动画循环效果代码/title

link rel="stylesheet" type="text/css" href="css/normalize.css"

link rel="stylesheet" type="text/css" href="css/demo.css"

!--必要样式--

link rel="stylesheet" type="text/css" href="css/component.css"

!--[if IE]

script src="js/html5.js"/script

![endif]--

/head

body

div class="container demo-1"

div class="content"

div id="large-header" class="large-header" style="height: 185px;"

canvas id="demo-canvas" width="1304" height="185"/canvas

h1 class="main-title"Connect span class="thin"Three/span/h1

/div

nav class="codrops-demos"

a class="current-demo" href="index.html"Demo 1/a

/nav

/div

/div!-- /container --

script src="js/TweenLite.min.js"/script

script src="js/EasePack.min.js"/script

script src="js/rAF.js"/script

script src="js/demo-1.js"/script

div class="sogoutip" style="z-index: 2147483645; visibility: hidden; display: none;"/divdiv class="sogoubottom" id="sougou_bottom" style="display: none;"/divdiv id="ext_stophi" style="z-index: 2147483647;"div class="extnoticebg"/divdiv class="extnotice"h2关闭提示 a href="#" title="关闭提示" id="closenotice" class="closenotice"关闭/a/h2p id="sogouconfirmtxt"/p a id="sogouconfirm" href="#" class="extconfirm"确 认/a a id="sogoucancel" href="#" class="extconfirm"取 消/a/div/divdiv id="ext_overlay" class="ext_overlayBG" style="display: none; z-index: 2147483646;"/diviframe class="sogou_sugg_feedbackquan" frameborder="0" scrolling="no" src=";w=1366v=7400st=1465483516429od=6612ls=1465482970132lc=lk=1463925952631sd=72cd=0kd=0u=1450532590172818y=EC8B5B0919EDD514D2F1263AA4A58EF6query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2F;r=http%3A%2F%2F" style="border: none; display: none; z-index: 2147483645; background: transparent;"/iframescript src=";uigs_productid=webexttype=ext_sugguigs_t=1465483517392lt=212ie=0v=7400y=EC8B5B0919EDD514D2F1263AA4A58EF6query=html5%20canvas%E9%A6%96%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E8%83%8C%E6%99%AF%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%95%88%E6%9E%9C%E4%BB%A3%E7%A0%81|http%3A%2F%2F"/script

/body

/html

2、css样式如下：

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

如何给html页面添加动态等待效果

1、直接贴图：

在界面上贴一个gif动态等待效果图片

gif图片获取方式：网上找素材，会ps的可以自己制作

img src="wait.gif" /

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：

这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制

下面提供一个CSS3绘制的范例

style

.loading {

width:0;

height:0;

border-right:20px solid #fff;

border-top:20px solid #000;

border-left:20px solid #fff;

border-bottom:20px solid #000;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

.loading {

animation: bganim 0.6s linear 0s infinite;

-moz-animation: bganim 0.6s linear 0s infinite;

-webkit-animation: bganim 0.6s linear 0s infinite;

}

@keyframes bganim {

from { transform:rotate(0deg); } to { transform:rotate(360deg); }

}

@-moz-keyframes bganim {

from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }

}

@-webkit-keyframes bganim {

from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }

}

/style

labelCSS3效果/label

div class="loading"/div

-------------------------------------------------

效果如下图：

运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

3、使用js等待效果插件(如：spin.js)

JS

-----------------------------------------------------

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1,

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

};

var target = document.getElementById('img_wait');

var spinner = new Spinner(opts).spin(target);

7

html

---------------------------------

div id="img_wait"/div

html5实现动态图

用p标签撒..... 给p标签定义margin和padding 然后定义backgroud-color 和color 最后再浮动一个span（用css3制作三角形 这个可以百度的）定位到p标签上

p style="p

osition: relative;

"span style="

    padding: 1em;

    border-radius: 0.5rem;

    background-color: yellowgreen;

    color: rgb(97, 94, 94);

    font-weight: 400;

"求大神，怎么实现图中的自动换行效果，就是假如文字比较多，框自动加长/span

span style="

    position: absolute;

    top: -1.2rem;

    left: 0.5rem;

    width: 0;       height:0;       

    border-left: 0.5rem solid transparent;      

    border-right: 0.5rem solid transparent;      

    border-bottom: 0.7rem solid yellowgreen;

"/span/p

html5中动态效果代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html文字动态特效代码、html5中动态效果代码的信息别忘了在本站进行查找喔。