原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
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)
{
this.x=x; this.y=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();
//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();
!-- var imageData=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,
本司主营文章撰写、培训教材、合同协议、发言稿、策划、汇报、各类文案。 ~ 海量资深编辑老师无缝对接，一对一服务。 ~ 保原创！可加急！免费改！
文档评论（0）