HTML5Canvas畫心CSS六邊形

1、HTML5 Canvas 畫心 CSS 六邊形文件是模塊化的，修改下可以直接使用（模塊化的并不是很好）HTML5 Canvas畫心，可以用來表白哦，加個jquery的緩入，加個計時時間。以下是源碼：（主要方法借鑒自網(wǎng)上代碼）（jquery自行引入，不貼出）clover.js（文件）/*ctx:畫布上下文環(huán)境*x,y:四葉草的中心點坐標(biāo)*length:數(shù)量級*piece:每個數(shù)據(jù)級的大小，單位px*/function clover(ctx,x,y,length,piece)try(!length | length%4!=0) && (length=4);!piece &&

2、amp; (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.b

3、eginPath();/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.

4、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()

5、;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.quadraticCu

6、rveTo(-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

7、.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.quadraticCur

8、veTo(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

9、.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

10、('%c 四葉草畫圖失?。?#39;,'color:red');/var ctx=cav.getContext('2d');/clover(ctx,cav.width/2,cav.height/2,8,10);dynamicCSS.css（文件）bodyfont-family:'simsun','Verdana'-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;.f

11、ormContentpadding:5px;margin-top:25px;.formContent input,.formContent textareamargin-right:10px;.formContent labelvertical-align:top;font-style:italic;font-weight:800;#leftContainwidth:700px;overflow:hidden;word-wrap:break-word;white-space:pre;min-height:250px;#leftContain spandisplay:inline-block;.

12、container:aftercontent:""display:block;clear:both;margin-bottom:20px;.cus-setposition: relative;height:8px;width:100%;margin-bottom:5px;margin-top:10px;.cus-set:beforewidth:50%;height:2px;background: -webkit-linear-gradient(left,red, purple); /* Safari 5.1 - 6.0 */background: -o-linear-gra

13、dient(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:"".cus-set:afterposition:absolute;top:0;left:50%;border-st

14、yle: solid;border-width:8px 8px 0;border-color: black transparent;display:inline;content:"".display-nonedisplay:none;.topIcon:afterborder-width:0 8px 8px !important;top:-6px !important;buttonmargin-left:20px;border:2px solid green;border-radius: 25px;background-color:pink;height:3em;button

15、:focus,button:hoverbackground-color:#F9A7B0;outline:none;.maskposition:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:10;.fix-divposition:fixed;bottom:0;right:20px;font-size:16px;z-index:20;DynamicDisplay.html（文件）<!DOCTYPE htnl><html><head><meta charset="utf

16、-8" /><title><動態(tài)顯示文字</title><link rel="stylesheet" media="screen" href="dynamicCSS.css" /><script src="heart.js"></script><script src="clover.js"></script><script src="flower.js">&l

17、t;/script><script src="square.js"></script><script src="jquery-2.1.4.min.js"></script><script>Stotype.format=function(a,b)var temp=''if(a=16)for(var i=b-this.length;i>0;i-)temp+='0'return (temp+this).toUpperCase();var b

18、orderHeight=8;var borderWidth=13;$('head').append('<style>.hexfloat:left;opacity: 0.5;.hex .topwidth:0;border-bottom: '+borderHeight+'px solid;border-left: '+borderWidth+'px solid transparent;border-right: '+borderWidth+'px solid transparent;.hex .bottomwidt

19、h:0;border-top: '+borderHeight+'px solid;border-left: '+borderWidth+'px solid transparent;border-right: '+borderWidth+'px solid transparent;.hex .middlewidth: '+borderWidth*2+'px;height: '+borderHeight*2+'px;.opacityopacity: 1;</style>');</script&

20、gt;</head><body><!- 一些關(guān)于此頁面的設(shè)置 -><div class="cus-set" title="展開設(shè)置頁"></div><div id="detailSet" class="display-none cus-set-detail"><div class="container"><div id="rightContain"><div class=&q

21、uot;formContent"><label for="cusFont">字體</label><input id="cusFont" autofocus placeholder="字體" /></div><div class="formContent"><label for="message">您想要呈現(xiàn)的段落</label><textarea id="message"

22、 rows="10" cols="50" placeholder="您想要呈現(xiàn)的段落"></textarea><button onclick="message.value=''" style="vertical-align: bottom;">清除</button></div></div></div><div><input id="color" /><i

23、nput id="opacity" type="range" min="0" max="1" value="1" step="0.1" style="margin-left:10px;position: relative;top: 6px;" title"字的透明度：1為不透明。" /><span style="margin-left:20px">添加樣式：</span><butt

24、on onclick="fontColor=document.getElementById('color').value;">字體顏色</button><button onclick="backgroundColor=document.getElementById('color').value;">背景顏色</button><button id="addStyle">添加</button></div><div id=&q

25、uot;content" style="width: 442px; height: 400px;"></div><script>var div=''var color=-0x000033;for(var i=0,j=10;i<8;i+,j+)div+='<div style="margin-top:'+i*borderHeight*3+'px;margin-left:'+(7-i)*borderWidth+'px;position: absolute;&qu

26、ot;>'for(var k=j;k>0;k-)if(color.toString(16).format(16,6).charAt(2)='F'&&color.toString(16).format(16,6).charAt(4)='F')color-=0xFFFF;color+=0x330000;else if(color.toString(16).format(16,6).charAt(4)='F')color-=0xFF;color+=0x3300;elsecolor+=0x33;div+='&l

27、t;div class="hex"><div class="top" style="border-bottom-color:#'+color.toString(16).format(16,6)+'"></div><div class="middle" style="background-color:#'+color.toString(16).format(16,6)+'"></div><div class

28、="bottom" style="border-top-color:#'+color.toString(16).format(16,6)+'"></div></div>'div+='</div>'var temp=-i*borderHeight*3+borderHeight*4;j-;for(var i=0;i<8;i+,j-)div+='<div style="margin-top:'+(temp+i*borderHeight*3)+

29、'px;margin-left:'+i*borderWidth+'px;position: absolute;">'for(var k=j;k>0;k-)if(color.toString(16).format(16,6).charAt(2)='F'&&color.toString(16).format(16,6).charAt(4)='F')color-=0xFFFF;color+=0x330000;else if(color.toString(16).format(16,6).charAt

30、(4)='F')color-=0xFF;color+=0x3300;elsecolor+=0x33;div+='<div class="hex"><div class="top" style="border-bottom-color:#'+color.toString(16).format(16,6)+'"></div><div class="middle" style="background-color:#'+co

31、lor.toString(16).format(16,6)+'"></div><div class="bottom" style="border-top-color:#'+color.toString(16).format(16,6)+'"></div></div>'div+='</div>'$('#content').append(div);$('div.hex').click(function()

32、$("#color").val($(this).find('.middle').css('background-color');return false;);$('div.hex').mouseover(function()$(this).addClass('opacity');return false;);$('div.hex').mouseleave(function()$(this).removeClass('opacity');return false;);</sc

33、ript><h3>調(diào)節(jié)字顯示的速度</h3><div style="margin-top:20px;"><label for="binkSpeed">數(shù)量</label><input id="binkSpeed" type="range" min="1" max="10" step="1" value="10" /><span>10</spa

34、n></div><div style="margin-top:20px;"><label for="pieSpeed">單位時長(ms)</label><input id="pieSpeed" type="range" min="10" max="100" step="10" value="50" /><span>50</span></div

35、><h3>顯示速度為:&nbsp;<span>500</span></h3></div><div id="leftContain" class="container"><h1>動態(tài)展示文字</h1></div><div class="cus-set" title="展開設(shè)置頁"></div><div id="drawOption" class=&

36、quot;display-none cus-set-detail" style="margin-bottom:40px;"><h3>文字隱沒參數(shù)</h3><label>消失總時間（ms）</label><input type="number" value="5000" min="1" id="disappearTime" /><label>單位變化時間（ms）</label><input t

37、ype="number" value="100" min="1" id="disappearPer" /><h3>心形參數(shù)</h3><label>大小系數(shù)</label><input type="number" min="1" value="20" id="heartLength" /><label>取點數(shù)量</label><input ty

38、pe="number" min="4" id="heartNum" /><h3>花朵參數(shù)</h3><label>花瓣數(shù)量范圍</label><input id="countMax" value="8" type="number" min="1" step="1" /><input id="countMin" value="15"

39、; type="number" min="1" step="1" /><label>花瓣長度范圍</label><input id="lengthMax" type="number" min="1" value="8" step="1" /><input id="lengthMin" type="number" min="1" v

40、alue="10" step="1" /><label>花瓣每次生長長度范圍</label><input id="perMin" value="0.1" type="number" min="0" /><input id="perMax" value="1" type="number" min="0.1" /><label>是否按距

41、離過濾點：</label><input type="radio" name="fiterFlag" value="0" checked />false<input type="radio" name="fiterFlag" value="1" style="margin-left:20px;" />true<h5>顏色及透明度</h5><label>r</label><

42、;input id="colorRMin" type="number" value="128" min="0" max="255" /><input id="colorRMax" type="number" value="255" min="0" max="255" /><label>g</label><input id="colorGMi

43、n" type="number" value="0" min="0" max="255" /><input id="colorGMax" type="number" value="128" min="0" max="255" /><label>b</label><input id="colorBMin" type="number&

44、quot; value="0" min="0" max="128" /><input id="colorBMax" type="number" value="128" min="0" max="255" /><label>透明度</label><input id="colorA" type="number" value="0.1"

45、 min="0" max="1" step="0.1" /><br /><br /><label>畫點間隔時間（ms）</label><input id="morePerTime" type="number" value="50" min="0" /><label>生長間隔時間（ms）</label><input id="growPerTime&quo

46、t; type="number" value="16" min="0" /><label>延遲畫圖時間（ms）</label><input id="delayTime" type="number" value="0" min="0" /><h3>正方形參數(shù)</h3><label>左上角頂點坐標(biāo)：（x，y）</label><input id="squar

47、eX" type="number" value="0" min="0" /><input id="squareY" type="number" value="0" min="0" /><label>邊長</label><input id="squareSide" type="number" value="500" min="1&q

48、uot; /><label>取點數(shù)量</label><input id="squareCount" type="number" min="4" value="20" /><h3>四葉草單瓣參數(shù)</h3><label>單位長度（px）</label><input type="number" id="cloverPie" value="5" min="1&

49、quot; /><label>長度級數(shù)</label><input id="cloverPieLevel" type="number" value="4" min="4" step="4" /></div><div id="fun" class="container"><button>花形的心</button><button>四葉草的心</butto

50、n><button>花形的正方形</button></div><div class="container"><canvas id="cav" height="800" width="800">對不起，您的瀏覽器不支持canvas標(biāo)簽。</canvas></div><script src="dynamicJS.js"></script><script src="main

51、Fun.js"></script><div class="display-none mask" title="請等待繪圖完成"></div></body></html>dynamicJS.js（文件）function dynamicDisplayContent()this.details=;this.tempDetail=''this.content=""this.style="background-image: -webkit-li

52、near-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);background-image:linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);-webkit-background-clip:text;-webkit-text-fill-color: transparent;"this.fps=pieSpeed.value*binkSpeed.value;var temp=parseInt(arguments0);if(temp

53、)this.fps=temp;this.lastChar='_'this.time=null;this.stop=false;this.i=0;dynamicDisplayContent.initFont=function()cusFont.onchange=function()var temp=cusFont.value.trim();document.body.style.fontFamily=(temp?('"'+cusFont.value.trim()+'",'):'')+"'sims

54、un','Verdana'"dynamicDisplayCtotype=init:function(details)this.tempDetail=details;trywhile(this.tempDetail)var index=this.tempDetail.indexOf('#');var index2=this.tempDetail.substring(index+2).indexOf('#')+2;var index3=this.tempDetail.substring(index+2).inde

55、xOf('#')+2;if(index!=-1&&index2!=1&&(index3>index2|index3=1)if(index!=0)this.detailPush(index,'');elsevar temp=this.tempDetail.substring(0,index2+1)this.tempDetail=this.tempDetail.substring(index2+1);index=this.tempDetail.indexOf('#');index2=this.tempDetail

56、.substring(index+2).indexOf('#')+2;if(index!=-1&&index2!=1)this.detailPush(index,temp);elseif(this.tempDetail)this.detailPush(this.tempDetail.length,temp);elseif(this.tempDetail)this.detailPush(this.tempDetail.length,'');catch(e)if(typeof this.tempDetail!="string")c

57、onsole.log('%c 請傳人string','color:red');elseconsole.log('%c 未知錯誤','color:red');return this;,detailPush:function(length,style)this.detailsthis.i=;this.detailsthis.i.push(this.tempDetail.substring(0,length);this.detailsthis.i.push(style.replace(/#/g,'').trim();th

58、is.i+;this.tempDetail=this.tempDetail.substring(length);return this;,innerHtml:function()if(!this.i)return;var self=this;var j=0;var k=0;var tempElemrnt=leftContain.firstChild;leftContain.innerHTML=''leftContain.appendChild(tempElemrnt);for(var temp=0;temp<this.i;temp+)var element=documen

59、t.createElement('span');element.setAttribute('style',this.detailstemp1?this.detailstemp1:this.style);if(!temp)self.t=setInterval(function()if(!self.stop)var tempElemrnt=document.querySelectorAll('#leftContain span');tempElemrnt=tempElemrntk;if(j<self.detailsk0.length)var t

60、empText=self.detailsk0.substring(0,j+1);if(tempText.charAt(tempText.length-1)=' ')tempText.substring(0,tempText.length-1)+"&ensp;"tempElemrnt.innerHTML=j&1?tempText:(tempText+self.lastChar);j+;elsetempElemrnt.innerHTML=self.detailsk0.replace(/ /g,'&ensp;');j=0;i

61、f(+k=self.i)self.clear();,this.fps);leftContain.appendChild(element);return this;,clear:function()clearInterval(this.t);this.stop=true;return this;,poInit:function(details)this.tempDetail=details;trythis.details=dynamicDisplayContent.handingString(this.tempDetail);this.i=this.details.length;catch(e)

62、if(typeof this.tempDetail!="string")console.log('%c 請傳人string','color:red');elseconsole.log('%c 未知錯誤','color:red');return this;dynamicDisplayContent.start=function()var tempCase=new dynamicDisplayContent().poInit('測試case初始值');tempCase.innerHtml();message.onchange=function()tempCase.clear();tempCase=new dynamicDisplayContent().poInit(message.value);tempCase.innerHtml();binkSpeed.onchange=function()tempCase.clear();document.querySelector('#binkSpeed+span').innerHTML=binkSpeed.value;document.quer