HTML5 Canvas 画心 CSS 六边形
更新时间：2023-11-05 07:44:01 阅读量： 综合文库 文档下载
- html5推荐度：
- 相关推荐
HTML5 Canvas 画心CSS 六边形
文件是模块化的，修改下可以直接使用（模块化的并不是很好）
HTML5 Canvas画心，可以用来表白哦，加个jquery的缓入，加个计时时间。 以下是源码：（主要方法借鉴自网上代码）（jquery自行引入，不贴出） clover.js（文件）
/*ctx:画布上下文环境 **x,y:四叶草的中心点坐标 **length:数量级
**piece:每个数据级的大小，单位px */
function clover(ctx,x,y,length,piece){
try{
(!length || length%4!==0) && (length=4); !piece && (piece=5); ctx.save(); function point(x,y) { }
var a=new point(0,0);
var b=new point(length*piece,0);
var c=new point(length/2*piece,length/2*piece); var d=new point(length/4*piece*3,length/4*piece); var e=new point(length/2*piece,0); ctx.translate(x,y); ctx.fillStyle='green'; //ctx.beginPath();
this.x=x; this.y=y;
//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();
ctx.rotate(Math.PI/2);
//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');
//var ctx=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{ }
.formContent input,.formContent textarea{ }
margin-right:10px; padding:5px; margin-top:25px;
.formContent label{ }
#leftContain{ }
#leftContain span{ }
.container:after{ } .cus-set{ }
position: relative; height:8px; width:100%; margin-bottom:5px; margin-top:10px; content:\display:block; clear:both;
margin-bottom:20px; display:inline-block; width:700px; overflow:hidden; word-wrap:break-word; white-space:pre; min-height:250px; vertical-align:top; font-style:italic; font-weight:800;
.cus-set:before{ }
.cus-set:after{ }
.display-none{ }
.topIcon:after{
border-width:0 8px 8px !important; top:-6px !important; display:none; position:absolute; top:0; left:50%;
border-style: solid; border-width:8px 8px 0; border-color: black transparent; display:inline; content:\width:50%; height:2px;
background: -webkit-linear-gradient(left,red, purple); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right,red, purple); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right,red, purple); /* Firefox 3.6 - 15 */ background-color:linear-gradient(to right,red, purple);; position:absolute; top:0; left:0; display:block; content:\
} button{ }
button:focus,button:hover{ } .mask{ } .fix-div{ }
position:fixed; bottom:0; right:20px; font-size:16px; z-index:20; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:10;
background-color:#F9A7B0; outline:none; margin-left:20px; border:2px solid green; border-radius: 25px; background-color:pink; height:3em;
DynamicDisplay.html（文件）
<动态显示文字