HTML5Canvas画心CSS六边形讲述.docx

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>

--一些关于此页面的设置-->