经验分享程序开发文档资料数据资源其它资源

html5 canvas实现文字变换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 canvas实现文字变换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

html5 canvas实现文字变换特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>     	 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript">
var isDesktop = navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i) ? false : true;
var fontunit        = isDesktop ? 20 : ((window.innerWidth>window.innerHeight?window.innerHeight:window.innerWidth)/320)*10;
document.write('<style type="text/css">'+
'html,body {font-size:'+(fontunit<30?fontunit:'30')+'px;}'+
(isDesktop?'#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position: absolute;}':
'#gamepage,#gameend,#GameLayerBG,#GameScoreLayer.SHADE{position:fixed;}@media screen and (orientation:landscape) {#landscape {display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox;}}')+
'</style>');
</script>
</head>
<body >
<div id="gamepage">
	<canvas id="canvas1" style="left: 0;top: 0;"></canvas>
</div>
<div class="leftbtn actionbtn" onclick="changeNum(0)">历史</div>
<div class="leftbtn" onclick="changeNum(1)">经济</div>
<div class="leftbtn" onclick="changeNum(2)">文化</div>
<div class="leftbtn" onclick="changeNum(3)">作者</div>
<div class="img_box" id="img_box">
	<img id="img_1" src="image/0_0.jpg" onclick="bigimg(this,0)"/>
	<img id="img_2" src="image/0_1.jpg" onclick="bigimg(this,1)"/>
</div>
</body>
</html>

JS代码(js.js):

window.onload = function(){
	body = document.body;
	body.style.height = bodyheight+'px';
	body.style.width = bodywidth+'px';
	var btnarr=document.getElementsByClassName("leftbtn");
	var topF=(bodyheight-0.55*bodywidth)/2;
	for(var i=0;
	i<btnarr.length;
	i++){
	btnarr[i].style.height=bodywidth*0.1+"px";
	btnarr[i].style.top=topF+0.15*bodywidth*i+"px";
	btnarr[i].style.fontSize=font_size+"px";
	btnarr[i].style.lineHeight=bodywidth*0.1+"px";
}
document.getElementById('gamepage').style.width=bodywidth+'px';
	document.getElementById('gamepage').style.height=bodyheight+'px';
	document.getElementById('canvas1').width=bodywidth;
	document.getElementById('canvas1').height=bodyheight;
	document.getElementById('canvas1').style.width=bodywidth+'px';
	document.getElementById('canvas1').style.height=bodyheight+'px';
	var that = this;
	info();
	document.getElementById("canvas1").addEventListener("dblclick",function(e){
	e.stopPropagation();
	e.preventDefault();
	ondblclick=true;
}
,false);
	document.getElementById("canvas1").addEventListener(START_EVENT,function(e){
	try{
	if(e.touches.length > 1){
	// 仅处理一根手指e.stopPropagation();
	e.preventDefault();
	return;
}
}
catch(e){
}
e.stopPropagation();
	e.preventDefault();
	if(window.timer!=null){
	return;
}
if(!isread){
	startRun()}
else{
	//var num=(nownum+1)%3;
	//changeNum(num);
}
}
,false);
	document.getElementById("canvas1").addEventListener(END_EVENT,function(e){
	try{
	if(e.touches.length > 1){
	// 仅处理一根手指e.stopPropagation();
	e.preventDefault();
	return;
}
}
catch(e){
}
e.stopPropagation();
	e.preventDefault();
}
,false);
	document.addEventListener(MOVE_EVENT,function(e){
	if(!istouchstart){
	return;
}
try{
	if(e.touches.length > 1){
	// 仅处理一根手指e.stopPropagation();
	e.preventDefault();
	return;
}
}
catch(e){
}
e.stopPropagation();
	e.preventDefault();
}
,false);
}
//画图function drawcanvas(){
	var theCanvas = document.getElementById("canvas1");
	var context = theCanvas.getContext("2d");
	context.clearRect(0,0,bodywidth,bodyheight);
	//更新数据update();
	//画图render();
	function update(){
	runtimes++;
	if(runtimes==16){
	clearInterval(timer);
	timer=null;
	runtimes=0;
	temparr=text1endarr;
	document.getElementById("img_1").src="image/"+nownum+"_0.jpg";
	document.getElementById("img_2").src="image/"+nownum+"_1.jpg";
}
else{
	for(var i=0;
	i<temparr.length;
	i++){
	temparr[i].x=temparr[i].x+temparr[i].speedx;
	temparr[i].y=temparr[i].y+temparr[i].speedy;
}
}
}
function render(){
	//var gradient=context.createLinearGradient(0,0,bodywidth,bodyheight);
	/* gradient.addColorStop("0","#9BF80D");
	gradient.addColorStop("0.6","#3E00FF");
	gradient.addColorStop("1.0","#fff");
	*/
// 用渐变填色context.save();
	context.textAlign = "start";
	context.textBaseline = "alphabetic";
	context.font="normal lighter "+font_size+"px cursive";
	context.fillStyle="#E5FFFD";
	var linelenght=Math.floor((bodywidth-24)/font_size);
	//draw_long_text("",context,12,90,linelenght);
	draw_text_px(context,main_text,temparr);
	context.restore();
}
}
function info(){
	var num=0;
	isread=false;
	main_arr=eval("text"+num+"arr");
	//设置main_arrmain_text=eval("text"+num);
	var theCanvas = document.getElementById("canvas1");
	var context = theCanvas.getContext("2d");
	context.clearRect(0,0,bodywidth,bodyheight);
	/* var gradient=context.createLinearGradient(0,0,bodywidth,bodyheight);
	gradient.addColorStop("0","#9BF80D");
	gradient.addColorStop("0.6","#3E00FF");
	gradient.addColorStop("1.0","#fff");
	*/
context.save();
	context.textAlign = "start";
	context.textBaseline = "alphabetic";
	context.font="normal lighter "+font_size+"px cursive";
	context.fillStyle="#E5FFFD";
	var linelenght=Math.floor((bodywidth-24)/font_size);
	draw_text(context,main_text,main_arr);
	context.restore();
}
function changeNum(num){
	//isread=false;
	if(num==nownum){
	return false;
}
if(window.timer!=null){
	clearInterval(timer);
	timer=null;
	runtimes=0;
}
var btnarr=document.getElementsByClassName("leftbtn");
	for(var i=0;
	i<btnarr.length;
	i++){
	removeClass(btnarr[i],"actionbtn");
}
addClass(btnarr[num],"actionbtn");
	main_arr=eval("text"+num+"arr");
	//设置main_arrmain_text=eval("text"+num);
	changeRun(nownum);
	nownum=num;
}
function draw_long_text(longtext,cxt,begin_width,begin_height,linelenght){
	var text = "";
	var count = 0;
	var begin_width = begin_width;
	var begin_height = begin_height;
	var stringLenght = longtext.length;
	var newtext = longtext.split("");
	var context = cxt;
	context.clearRect(0,0,600,300);
	context.textAlign = 'left';
	for(i = 0;
	i <= stringLenght;
	i++){
	if(count == linelenght){
	context.fillText(text,begin_width,begin_height);
	begin_height = begin_height + 25;
	text = "";
	count = 0;
}
if(i == stringLenght){
	context.fillText(text,begin_width,begin_height);
}
var text = text + newtext[0];
	count ++;
	newtext.shift();
}
}
function draw_text(context,text,textarr){
	for(i = 0;
	i < text.length;
	i++){
	var j=i%(textarr.length);
	context.fillText(text[i],textarr[j].x*bodywidth,textarr[j].y*bodyheight);
}
}
function draw_text_px(context,text,textarr){
	for(i = 0;
	i < textarr.length;
	i++){
	context.fillText(text[i],textarr[i].x,textarr[i].y);
}
}
function startRun(){
	text1endarr=[];
	for(var i=0;
	i<main_text.length;
	i++){
	var x=i%width_num;
	var y=Math.floor(i/width_num);
	var temp={
	"x":startx+x*font_size,"y":stary+line_leight*y}
;
	text1endarr.push(temp);
}
window.temparr=text1endarr;
	isread=true;
	for(var i=0;
	i<text1endarr.length;
	i++){
	var j=i%(main_arr.length);
	temparr[i].speedx=Number(((text1endarr[i].x-main_arr[j].x*bodywidth)/15).toFixed(3));
	temparr[i].speedy=Number(((text1endarr[i].y-main_arr[j].y*bodyheight)/15).toFixed(3));
	temparr[i].x=main_arr[j].x*bodywidth;
	temparr[i].y=main_arr[j].y*bodyheight;
}
var dom=document.getElementById("img_box");
	addClass(dom,"img_up");
	window.timer=setInterval(function(){
	drawcanvas();
}
,50);
}
function changeRun(num){
	text1endarr=[];
	for(var i=0;
	i<main_text.length;
	i++){
	var x=i%width_num;
	var y=Math.floor(i/width_num);
	var temp={
	"x":startx+x*font_size,"y":stary+line_leight*y}
;
	text1endarr.push(temp);
}
window.temparr=text1endarr;
	var obj1=document.getElementById("img_1");
	var obj2=document.getElementById("img_2");
	removeClass(obj1,"img_big0");
	removeClass(obj2,"img_big1");
	if(isread){
	isread=false;
	for(var i=0;
	i<text1endarr.length;
	i++){
	var j=i%(main_arr.length);
	temparr[i].speedx=(main_arr[j].x*bodywidth-text1endarr[i].x)/15;
	temparr[i].speedy=(main_arr[j].y*bodyheight-text1endarr[i].y)/15;
	temparr[i].x=text1endarr[i].x;
	temparr[i].y=text1endarr[i].y;
}
}
else{
	var temp_arr=eval("text"+num+"arr");
	//设置main_arrfor(var i=0;
	i<text1endarr.length;
	i++){
	var j=i%(main_arr.length);
	var m=i%(temp_arr.length);
	temparr[i].speedx=(main_arr[j].x*bodywidth-temp_arr[m].x*bodywidth)/15;
	temparr[i].speedy=(main_arr[j].y*bodyheight-temp_arr[m].y*bodyheight)/15;
	temparr[i].x=temp_arr[m].x*bodywidth;
	temparr[i].y=temp_arr[m].y*bodyheight;
}
}
var dom=document.getElementById("img_box");
	removeClass(dom,"img_up");
	window.timer=setInterval(function(){
	drawcanvas();
}
,50);
}
function bigimg(ele,num){
	toggleClass(ele,"img_big"+num);
}
//classfunction hasClass(obj,cls){
	return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj,cls){
	if (!this.hasClass(obj,cls)) obj.className += " " + cls;
}
function removeClass(obj,cls){
	if (hasClass(obj,cls)){
	var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
	obj.className = obj.className.replace(reg,' ');
}
}
function toggleClass(obj,cls){
	if(hasClass(obj,cls)){
	removeClass(obj,cls);
}
else{
	addClass(obj,cls);
}
}

CSS代码(css.css):

*{padding:0;margin:0;border:0px;overflow:hidden;position:absolute;}
body{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;margin:0;padding:0;left top repeat-y;background-size:100%;}
#gamepage{position:fixed;background:url(../image/bg.jpg);padding:0px;margin:0px;background-size:100% 100%;}
.title{position:fixed;top:10px;width:100%;height:50px;background-color:rgba(255,255,255,0.45);color:#00720E;font-size:23px;text-align:center;line-height:50px;font-weight:bold;}
.img_box{position:fixed;bottom:-20%;width:100%;height:20%;background-color:rgba(0,0,0,0.4);-webkit-transition-property:transform;-webkit-transition-duration:1s;transition-timing-function:ease-in-out;overflow:initial;}
.img_box img{margin-left:6%;width:41%;float:left;position:initial;height:90%;padding-top:2%;-webkit-transition-property:transform;-webkit-transition-duration:1s;transition-timing-function:ease-in-out}
.img_up{-webkit-transform:translate(0,-100%);}
.img_big0{-webkit-transform:scale(2)translate(28%,-30%);}
.img_big1{-webkit-transform:scale(2)translate(-28%,-30%);}
.leftbtn{display:block;width:12%;position:absolute;left:0;background-color:rgba(255,255,255,0.45);border-top-right-radius:40%;border-bottom-right-radius:40%;color:#02B546;padding-left:2px;font-weight:bold;text-align:left;}
.actionbtn{background-color:#00B43B;color:#FAAEF0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
783.33 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
783.33 KB
立即下载
区静澜希
了解
打赏作者 鼓励作者
html5特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章