给个例子：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload=function () {
var content = document.getElementById("canvas")
var cxt = content.getContext("2d")
cxt.font = "bold 30px Arial"
//fillText方式
cxt.fillText("随便写点儿啥", 50, 50)
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
<html><head>
<title>网页特效-文本特效-渐显的文字提示效果</title>
<FCK:meta http-equiv="content-Type" content="text/htmlcharset=gb2312" />
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.lookMe{
float:left
margin-right:10px
padding:5px
width:90px
color:#0099FF
cursor:pointer
background:#FFFADC
border:1px solid #CC6600
}
.lookMe span{
display:none
position:absolute
padding:5px
width:200px
color:#CC3300
background:#FFFADC
border:1px solid #CC6600
filter:alpha(opacity=0)
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>1、雅虎体育讯 北京时间6月23日，欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。</span>
</div>
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>2、在一场四分之一决赛中……</span>
</div>
<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利
<span>3、欧洲足球锦标赛在瑞士奥地利继续进行，在一场四分之一决赛中，西班牙队迎来了上届世界杯冠军意大利队，90分钟与加时赛双方均一球未进，在最终的点球大战中，西班牙4:2击败了对手，昂首挺进四强。</span>
</div>
<script>
var span,timer1
function lookMe(thisTag){
span = thisTag.getElementsByTagName('span')[0]
span.style.display = 'block'
span.filters[0].opacity=0
timer1=setInterval("showme()",10)
thisTag.onmouseout = function(){
span.style.display = 'none'
}
}
function showme()
{
if(span.filters[0].opacity==80){clearInterval(timer1)}
span.filters[0].opacity++
}
function mouseMove(event){
var xx=event.clientX + 5
var yy=event.clientY + 10
var obj = event.srcElement ? event.srcElement : event.target
var span=obj.getElementsByTagName("span")[0]
span.style.left = xx + 'px'
span.style.top = yy + 'px'
}
</script>
</body>
</html>
可以用css改变字体的大小和颜色。
1、新建html文件，在body标签中添加文字，这里以p标签内容为“演示文本”为例，这时网页将会显示字体默认大小和颜色：
2、在head标签中添加style标签给页面设置css样式，选择p标签，字体大小用的是“font-size”属性，属性值为字体大小，这里以“30px”为例，这时“演示文本”字体将会变大：
3、选择p标签，字体颜色用的是“color”属性，属性值为颜色，这里以红色“red”为例，这时“演示文本”字体将会变成红色：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）