HTML5 Canvas 画心 CSS 六边形.docx
《HTML5 Canvas 画心 CSS 六边形.docx》由会员分享,可在线阅读,更多相关《HTML5 Canvas 画心 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>
<动态显示文字
String.prototype.format=function(a,b){
vartemp='';
if(a===16){
for(vari=b-this.length;i>0;i--){
temp+='0'
}
}
return(temp+this).toUpperCase();
};
varborderHeight=8;
varborderWidth=13;
$('head').append('');
--一些关于此页面的设置-->