html5实现canvas绘制网页时钟的方法,html5实现canvas绘制椭圆形图案的方法

这里选取的例子,便是 WordPress 中比较有名的美化超链接Title效果,一般的
title 效果是把鼠标放到 a
元素中便会显示一个黄底色框,而且是延时显示,这样显然不是一个好的 UE
,所以美化的 Title 便诞生了,在本站现在的主题 Line
的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化 Title
的原理做的,之所以选取这个例子,一是该例子中很好的体现了 jQuery 中的 DOM
操作,二是美化 Title 在 WordPress 中比较常用,可以供需要做美化 Title
的人理解其中的原理。同时因为之前对 DOM 和美化 Title
有所研究,因此这篇笔记的内容将会叙述得更加丰富!

本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas
没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下:

本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的、带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下

美化 Title 的效果很简单,需要的是鼠标移动到超链接的那一刻就出现 Title
提示,当然也可以适当添加一些css作美化之用,以配合自己的主题。

1、在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上画园。
2、将隐式画布的影像,以不同的宽高比值,画在另一个显式的画布,以使园变成椭圆。
3、进而,加进动画功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock</title>
<script type="text/javascript"> 
var xClock=300; //表心位置
var yClock=250; //表心位置
var d=180.0;//钟表圆面的半径
var value = -d*1.07;

function enlarge(){
 d++;
}
function reduce(){
 d--;
}
function westwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(-1,0); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(-1,0); //置坐标轴原点于表心

}
function eastwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(1,0); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(1,0); //置坐标轴原点于表心
}
function upwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(0,-1); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(0,-1); //置坐标轴原点于表心
}
function downwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(0,1); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(0,1); //置坐标轴原点于表心
}


function fillPolygon( a, b, fillColor, ctx){
ctx.beginPath();
ctx.moveTo(a[0],b[0]);
for (var j=1;j<a.length;j++)
ctx.lineTo(a[j],b[j]);
ctx.closePath();
ctx.fillStyle=fillColor;
ctx.fill();
}

function randomColor(){ 
var s ="#";
for (var i=0;i<3;i++)
s += Math.floor(Math.random()*16).toString(16);
return s;
}

function locateCoordinate() {
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(xClock,yClock); //置坐标轴原点于表心
var c=document.getElementById("myPendulum");
var g2d=c.getContext("2d"); 
g2d.translate(xClock,yClock); //置坐标轴原点于表心
}

function drawFace(){ //定义画钟表表面drawFace方法
/* 表示1,2,4,5,7,8,10,11点钟位置的较小尺寸的菱形标志顶点坐标数组 */
var x = new Array(0, Math.round(d/30), 0, Math.round(-d/30));
var y = new Array( Math.round(-d*1.07),-d,Math.round(-d*0.9),-d);
/* 表示3,6,9,12点钟位置的较大尺寸的菱形标志顶点坐标数组 */
var x1= new Array(0,Math.round(d/15),0,Math.round(-d/15));
var y1 =new Array(Math.round(-d*1.13),-d,Math.round(-d*0.9),-d);
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
 //下面开始 准备画钟表圆面边
 g2d.beginPath();
 g2d.arc(0,0,d, 0 , 2*Math.PI);
 g2d.strokeStyle="lightGray";
 g2d.lineWidth=d/18;
 g2d.stroke(); //最后一笔,画钟表圆面边

 //下面开始准备画表示 每个钟点 的菱形
  for (var i=0;i<12;i++) 
 { //for 循环语句的循环体开始
 if (i%3==0){ //画较大尺寸的红色菱形,表示3,6,9,12点
 fillPolygon( x1, y1, "red", g2d);
 } else {//画较小尺寸的桔黄色菱形,表示其余的钟点
 fillPolygon(x,y,"orange",g2d);
 }
//以钟表表心为原点,坐标系顺时针转动30度,以便画下一个钟点位置的菱形标记
 g2d.rotate(Math.PI/6.0); 
 }//for 循环语句的循环体结束
}//画钟表表面 drawFace 方法结束

/* 定义画钟表的时针、分针、和秒针的方法 drawNeedles
* 形参 Hradian,单位弧度, 为时针从0点算起的弧度位置,
* 形参 Mradian,单位弧度, 为分针从0分算起的弧度位置,
* 形参 Sradian,单位弧度, 为秒针从0秒算起的弧度位置。*/
function drawNeedles( Hradian, Mradian, Sradian ){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
//以钟表表心为原点,坐标系顺时针转动Hradian弧度,以便画出时针
 g2d.rotate(Hradian); 
  //表示时针的多边形顶点的坐标数组
var Hx =new Array(0, Math.round(d/19),0, Math.round(-d/19) ); 
var Hy =new Array( Math.round(-d/2), Math.round(-d/3), 0, Math.round(-d/3) );
 fillPolygon(Hx,Hy,"magenta",g2d);//时针设为紫红色,
//以钟表表心为原点,坐标系逆时针转动Hradian弧度,以还原坐标系
 g2d.rotate(-Hradian); 

//以钟表表心为原点,坐标系顺时针转动Mradian弧度,以便画出分针 
 g2d.rotate(Mradian);
//表示分针的多边形顶点的坐标数组
var Mx=new Array(Math.round(-d/19),0,Math.round(d/19));
var My=new Array(0,Math.round(-d/1.3),0);
 fillPolygon(Mx,My,"gray",g2d); //分针设为灰色
//以钟表表心为原点,坐标系逆时针转动Mradian弧度,以还原坐标系
 g2d.rotate(-Mradian);

//以钟表表心为原点,坐标系顺时针转动Sradian弧度,以便画出秒针 
 g2d.rotate(Sradian);
 // 秒针设为随机颜色 
 g2d.strokeStyle='green';
 g2d.lineWidth="1";
 g2d.moveTo(0,0);
 g2d.lineTo(0,Math.round(-d/1.1));
 g2d.stroke();

 g2d.beginPath();
 g2d.arc(0,Math.round(-d),d/18, 0 , 2*Math.PI);
 g2d.fillStyle=randomColor();
 g2d.fill(); //最后一笔,画秒针顶点的小球
//以钟表表心为原点,坐标系逆时针转动Sradian弧度,以还原坐标系
 g2d.rotate(-Sradian); 
} //画表针方法 drawNeedles的代码块结束 

/* 画出字符串来表示瞬时时间 */
function DrawTime() {
 var time=new Date();  //获取当前时间。
 var hour=time.getHours(); //获取小时
 var minute=time.getMinutes();//获取分钟
 var second=time.getSeconds();//获取秒数

 var apm="AM"; //默认显示上午:AM.
 var canvas =document.getElementById("myCanvas"); 
 var g2d =canvas.getContext("2d"); 
 if(hour>12){
  //按照12小时制止显示
  hour=hour-12;
  apm="PM";
 }
 if(minute<10){
  //如果分钟只有1位,补0显示
  minute="0"+minute;
 }
 if(second<10){ //如果秒数只有1位,补0显示
  second="0"+second;
 }
 g2d.clearRect(-xClock,-yClock,600,600); //清屏

var s = hour+":"+minute+":"+second+":"+apm;

  g2d.fillStyle="red";
  g2d.font = d/4+ "px KAITI"; 
  g2d.fillText(s,-d/1.8, d*1.4);
g2d.font= d/4 + "px 楷体";
// Create gradient
var gradient=g2d.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
g2d.fillStyle=gradient;
g2d.fillText("大数据",-d/2.6,d/2);
//获得实例创建瞬间的秒读数,由此计算出秒针,相对于0 秒,走过的弧读数
var c = Math.PI/30 * second; 
//获得创建瞬间的的分钟读数,由此计算出分针,相对于0 分,走过的弧读数
var b = Math.PI/30 * minute;
/* 获得创建瞬间的的钟点读数,由此计算出时针,相对于0 点,走过的弧读数。
 * 时针走过的弧度为整点的度数(每小时走30度),加上走过分钟数的修正值 */
var a = Math.PI/180*(30 * hour + minute/2);
/* 坐标系平移 (xClock,yClock) ,使得坐标轴成为表盘中心 */
 drawFace();
 drawNeedles( a, b, c); 
 } // 方法 DrawTime 的代码块结束

 var i=0;
function pendulum() { //pendulum_bob
var instantAngle = new Array(64,61,56,49,40,29,16,3,-8,
-16,-29,-40,-49,-56,-61,-64,-64,-64,-61,-56,-49,-40,-29,
-16,-8,3,16,29,40,49,56,61,64,64); //摆的即时角度数组
var c=document.getElementById("myPendulum");
var ctx=c.getContext("2d");
var alpha=instantAngle[i++%instantAngle.length]*Math.PI/180;
ctx.clearRect(-300,-300,900,900);
ctx.rotate(alpha);
 // 秒针设为随机颜色 
 ctx.fillStyle='brown';
 ctx.fillRect(-3,0,6,d*1.4);

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
//ctx.fillRect(-d/3.5, d*1.35, d/1.6, d/4.4);

ctx.font="40px 楷体";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","white");
// Fill with gradient
//ctx.fillStyle=gradient;
ctx.fillStyle="red";

ctx.fillText("大数据",-d/3.2,d*1.55);
ctx.shadowBlur=0;
ctx.shadowColor=null;
ctx.fillStyle=null;
ctx.rotate(-alpha);

}


function preparation(){
 locateCoordinate()
 setInterval('DrawTime()',500);
 setInterval('pendulum()',200);
} 
</script>
<style>
#myCanvas{
 z-index:3;
 position:absolute; left:0px; top:0px;

}
#myPendulum{
 z-index:2;
 position:absolute; left:0px; top:0px;
}
#controlPanel{
 position:absolute; left:600px; top:0px;
 width:100px;
 text-align:center;
 font-family:"楷体";
 font-size:20px;
 font-weight:bold;
 color:#6C0;
}
</style>
</head>
<body onLoad="preparation()">
<canvas id="myCanvas" width="600" height="600" > 
   <p>Your browserdoes not support the canvas element!</p> 
</canvas>
<canvas id="myPendulum" width="600" height="600" > 
   <p>Your browserdoes not support the canvas element!</p> 
</canvas>
<div id="controlPanel">
<table>
<tr><td>控制</td><td>按钮</td></tr>
<tr><td><input value="增大" type="button" onclick="enlarge()"></button></td>
<td><input value="缩小" type="button" onclick="reduce()"></button></td></tr>

<tr><td><input value="左移" type="button" onclick="westwards()"></button></td>
<td><input value="右移" type="button" onclick="eastwards()"></button></td></tr>

<tr><td><input value="上移" type="button" onclick="upwards()"></button></td>
<td><input value="下移" type="button" onclick="downwards()"></button></td>
</tr>
</table>

</div>
</body>
</html>

首先写一段 Html 作为演示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试颜色背景</title>
<script>
var ticker=0;
var col = new Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000");

function drawBackground(){
var canvasHide=document.getElementById("hide"); //隐藏的画布
var g=canvasHide.getContext("2d"); //找出隐藏画布 hide 的画笔 g 
g.clearRect(0,0,1200,800); //清理隐藏画布
var i=0;
do { //画 不同颜色 依次同心发散的园
g.beginPath();
var grd=g.createRadialGradient(300,300,300-i*25, 300,300,265-i*25);
grd.addColorStop(0,col[(0+i+ticker)%col.length]);
grd.addColorStop(1,col[(1+i+ticker)%col.length]);
g.fillStyle=grd;
g.arc(300,300,300-i*25,0,2*Math.PI);
g.fill();
i++;
} while(i<11);

//找出显式画布 myCanvas 的画笔 gg 
var gg=document.getElementById("myCanvas").getContext("2d");
gg.clearRect(0,0,myCanvas.width,myCanvas.height); //清理显式画布

/* 将隐式画布 hide 的园形图像,
 * 以 宽 600, 高 300 的比例,
 * 画到显式画布 myCanvas,
 * 结果,隐式画布 hide 的园形图像,在显式画布 myCanvas 上 成了椭圆
 */
gg.drawImage(canvasHide,0,0,600,300); 
ticker++;
}

function preperation(){
setInterval('drawBackground()',1000);
 }
</script>
<style>
#myCanvas{
 position:absolute;
 left:0px;
 top:0px;
}
#hide{
 display:none;
}
</style>
</head>

<body onLoad="preperation()">
<canvas id="myCanvas" width="600" height="400" ></canvas>
<canvas id="hide" width="600" height="600" ></canvas>

</body>
</html>

效果图:

<div id="newtitle">
  <h2>美化Title</h2>
  <ul>
    <li><a href="#" title="这是Title1">Title1</a></li>
    <li><a href="#" title="这是Title2">Title2</a></li>
    <li><a href="#" title="这是Title3">Title3</a></li>
    <li><a href="#" title="这是Title4">Title4</a></li>
    <li><a href="#" title="这是Title5">Title5</a></li>
    <li><a href="#" title="这是Title6">Title6</a></li>
    <li><a href="#" title="这是Title7">Title7</a></li>
    <li><a href="#" title="这是Title8">Title8</a></li>
  </ul>
</div>

希望本文所述对大家的web程序设计有所帮助。

图片 1

 
接着我们需要完成两件事,一是当鼠标滑入超链接时创建一个内容为 title
内容的 div ,而是当鼠标滑出超链接时移除该 div 。

您可能感兴趣的文章:

  • JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
  • js点击任意区域弹出层消失实现代码
  • JavaScript实现点击按钮复制指定区域文本(推荐)
  • JS实现点击颜色块切换指定区域背景颜色的方法
  • js实现的点击div区域外隐藏div区域
  • js中点击空白区域时文本框与隐藏层的显示与影藏问题
  • js+html5实现canvas绘制圆形图案的方法
  • JavaScript
    Canvas绘制圆形时钟效果
  • js Canvas实现圆形时钟教程
  • JavaScript实现的圆形浮动标签云效果实例
  • JS+HTML实现的圆形可点击区域示例【3种方法】

希望本文所述对大家的web程序设计有所帮助。

这时显然需要用到 mouse 方法,在这里选用 mouseover 与 mouseout ,或是
mouseenter 与 mouseleave
。说到这里小插一段,科普推广一下上面两组方法的区别:

您可能感兴趣的文章:

  • JS+Canvas绘制动态时钟效果
  • js Canvas绘制圆形时钟效果
  • js Canvas实现圆形时钟教程
  • JavaScript学习小结之使用canvas画“哆啦A梦”时钟
  • JS+Canvas绘制时钟效果
  • JavaScript html5
    canvas绘制时钟效果(二)
  • JavaScript html5
    canvas绘制时钟效果
  • javascript结合Canvas
    实现简易的圆形时钟
  • html5 canvas
    js(数字时钟)实例代码
  • JS+H5 Canvas实现时钟效果

上面两组方法的功能均是当鼠标悬停在某网页元素上时触发事件,不同的是,
mouseover 与 mouseout
会同时绑定到该元素的子元素上,因此如果一个网页元素内有多个子元素时很有可能会发生在元素上一移动鼠标就会触发事件的情况。于是从
jQuery 1.3 开始便增加了两个新的 mouse 方法—— mouseenter 与 mouseleave
,使用 mouseenter 与 mouseleave
并不影响子元素。因为在上面的例子中,选取的网页元素是 a
标签,一般不会有子元素,所以用上面两组方法均可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:

相关文章

网站地图xml地图