HTML5Canvas画心CSS六边形讲述.docx
《HTML5Canvas画心CSS六边形讲述.docx》由会员分享，可在线阅读，更多相关《HTML5Canvas画心CSS六边形讲述.docx（61页珍藏版）》请在冰豆网上搜索。
HTML5Canvas画心CSS六边形讲述
HTML5Canvas画心CSS六边形
文件是模块化的，修改下可以直接使用（模块化的并不是很好）
HTML5Canvas画心，可以用来表白哦，加个jquery的缓入，加个计时时间。
以下是源码：
（主要方法借鉴自网上代码）（jquery自行引入，不贴出）
clover.js（文件）
/*ctx:
画布上下文环境
**x,y:
四叶草的中心点坐标
**length:
数量级
**piece:
每个数据级的大小，单位px
*/
functionclover（ctx,x,y,length,piece）{
try{
（!
length||length%4!
==0）&&（length=4）;
!
piece&&（piece=5）;
ctx.save（）;
functionpoint（x,y）
{
this.x=x;
this.y=y;
}
vara=newpoint（0,0）;
varb=newpoint（length*piece,0）;
varc=newpoint（length/2*piece,length/2*piece）;
vard=newpoint（length/4*piece*3,length/4*piece）;
vare=newpoint（length/2*piece,0）;
ctx.translate（x,y）;
ctx.fillStyle='green';
//ctx.beginPath（）;
//ctx.moveTo（a.x,a.y）;
//ctx.lineTo（b.x,b.y）;
//ctx.lineTo（c.x,c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（a.x,a.y）;
ctx.quadraticCurveTo（c.x,c.y,d.x,d.y）;
ctx.quadraticCurveTo（b.x,b.y,e.x,e.y）;
ctx.fill（）;
//ctx.stroke（）;
//ctx.beginPath（）;
//ctx.moveTo（a.x,-a.y）;
//ctx.lineTo（b.x,-b.y）;
//ctx.lineTo（c.x,-c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（a.x,-a.y）;
ctx.quadraticCurveTo（c.x,-c.y,d.x,-d.y）;
ctx.quadraticCurveTo（b.x,-b.y,e.x,-e.y）;
ctx.fill（）;
//ctx.beginPath（）;
//ctx.moveTo（-a.x,-a.y）;
//ctx.lineTo（-b.x,-b.y）;
//ctx.lineTo（-c.x,-c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（-a.x,-a.y）;
ctx.quadraticCurveTo（-c.x,-c.y,-d.x,-d.y）;
ctx.quadraticCurveTo（-b.x,-b.y,-e.x,-e.y）;
ctx.fill（）;
//ctx.beginPath（）;
//ctx.moveTo（-a.x,a.y）;
//ctx.lineTo（-b.x,b.y）;
//ctx.lineTo（-c.x,c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（-a.x,a.y）;
ctx.quadraticCurveTo（-c.x,c.y,-d.x,d.y）;
ctx.quadraticCurveTo（-b.x,b.y,-e.x,e.y）;
ctx.fill（）;
--varimageData=ctx.getImageData（0,200,800,400）;-->
ctx.rotate（Math.PI/2）;
--ctx.drawImage（imageData,0,0）;-->
//ctx.beginPath（）;
//ctx.moveTo（a.x,a.y）;
//ctx.lineTo（b.x,b.y）;
//ctx.lineTo（c.x,c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（a.x,a.y）;
ctx.quadraticCurveTo（c.x,c.y,d.x,d.y）;
ctx.quadraticCurveTo（b.x,b.y,e.x,e.y）;
ctx.fill（）;
//ctx.beginPath（）;
//ctx.moveTo（a.x,-a.y）;
//ctx.lineTo（b.x,-b.y）;
//ctx.lineTo（c.x,-c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（a.x,-a.y）;
ctx.quadraticCurveTo（c.x,-c.y,d.x,-d.y）;
ctx.quadraticCurveTo（b.x,-b.y,e.x,-e.y）;
ctx.fill（）;
//ctx.beginPath（）;
//ctx.moveTo（-a.x,-a.y）;
//ctx.lineTo（-b.x,-b.y）;
//ctx.lineTo（-c.x,-c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（-a.x,-a.y）;
ctx.quadraticCurveTo（-c.x,-c.y,-d.x,-d.y）;
ctx.quadraticCurveTo（-b.x,-b.y,-e.x,-e.y）;
ctx.fill（）;
//ctx.beginPath（）;
//ctx.moveTo（-a.x,a.y）;
//ctx.lineTo（-b.x,b.y）;
//ctx.lineTo（-c.x,c.y）;
//ctx.closePath（）;
//ctx.stroke（）;
ctx.beginPath（）;
ctx.moveTo（-a.x,a.y）;
ctx.quadraticCurveTo（-c.x,c.y,-d.x,d.y）;
ctx.quadraticCurveTo（-b.x,b.y,-e.x,e.y）;
ctx.fill（）;
ctx.restore（）;
}
catch（e）
{
console.log（'%c四叶草画图失败！
','color:
red'）;
}
}
//varctx=cav.getContext（'2d'）;
//clover（ctx,cav.width/2,cav.height/2,8,10）;
dynamicCSS.css（文件）
body{
font-family:
'simsun','Verdana';
-webkit-user-select:
none;-ms-user-select:
none;-moz-user-select:
none;-o-user-select:
none;user-select:
none;
}
.formContent{
padding:
5px;
margin-top:
25px;
}
.formContentinput,.formContenttextarea{
margin-right:
10px;
}
.formContentlabel{
vertical-align:
top;
font-style:
italic;
font-weight:
800;
}
#leftContain{
width:
700px;
overflow:
hidden;
word-wrap:
break-word;
white-space:
pre;
min-height:
250px;
}
#leftContainspan{
display:
inline-block;
}
.container:
after{
content:
"";
display:
block;
clear:
both;
margin-bottom:
20px;
}
.cus-set{
position:
relative;
height:
8px;
width:
100%;
margin-bottom:
5px;
margin-top:
10px;
}
.cus-set:
before{
width:
50%;
height:
2px;
background:
-webkit-linear-gradient（left,red,purple）;/*Safari5.1-6.0*/
background:
-o-linear-gradient（right,red,purple）;/*Opera11.1-12.0*/
background:
-moz-linear-gradient（right,red,purple）;/*Firefox3.6-15*/
background-color:
linear-gradient（toright,red,purple）;;
position:
absolute;
top:
0;
left:
0;
display:
block;
content:
"";
}
.cus-set:
after{
position:
absolute;
top:
0;
left:
50%;
border-style:
solid;
border-width:
8px8px0;
border-color:
blacktransparent;
display:
inline;
content:
"";
}
.display-none{
display:
none;
}
.topIcon:
after{
border-width:
08px8px!
important;
top:
-6px!
important;
}
button{
margin-left:
20px;
border:
1pxsolidgreen;
border-radius:
25px;
background-color:
pink;
height:
3em;
}
button:
focus,button:
hover{
background-color:
#F9A7B0;
outline:
none;
}
.mask{
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
100%;
opacity:
0;
z-index:
10;
}
.fix-div{
position:
fixed;
bottom:
0;
right:
20px;
font-size:
16px;
z-index:
20;
}
DynamicDisplay.html（文件）
DOCTYPEhtnl>
<动态显示文字
--一些关于此页面的设置-->
升级会员 