HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像檀蹋。
畫布是一個(gè)矩形區(qū)域松申，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形攻臀、圓形焕数、字符以及添加圖像的方法纱昧，可以創(chuàng)建豐富的圖形引用刨啸。
在本教程中，我們將學(xué)習(xí)如何使用canvas 配合javascript制作愛心利薩如曲線识脆，但首先我們將向您介紹canvas设联，該便簽用于在網(wǎng)頁上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在HTML上進(jìn)行圖形操作灼捂，語法如下：
<canvas></canvas>
現(xiàn)在我們將設(shè)計(jì)一款canvas圖形的愛心离例。本教程適用于表白、搭訕悉稠、撩妹宫蛆、裝逼、等等的猛。耀盗。。
首先在計(jì)算機(jī)中的某個(gè)地方創(chuàng)建一個(gè)文件夾卦尊，并在其中創(chuàng)建三個(gè)新文件命名index.html叛拷，style.css和canvas.js
現(xiàn)在在index.html中輸入以下HTML代碼
<!DOCTYPE html>
<html>
<head>
<title>cansva實(shí)現(xiàn)愛心曲線圖</title>
<link rel="stylesheet" herf="style.css">
</head>
<body>
</body>
<sanvas onclick="inint()"></sanvas>
<script type="text/javascript" src="canvas.js"></script>
</html>
現(xiàn)在我們已經(jīng)準(zhǔn)備好了網(wǎng)頁結(jié)構(gòu)，打開您的style.css文件并輸入以下代碼
* {
margin: 0;
padding: 0;
border: 0;
background: #000000
}
canvas {
position: relative; top:50%;
left:50%;
margin-left:-70vmin;
width:140vmin;
height:100vmin;
overflow:hidden;
display: block岂却；
}
現(xiàn)在打開你的瀏覽器你會(huì)發(fā)現(xiàn)一片黑暗忿薇；現(xiàn)在我們來實(shí)現(xiàn)js代碼部分
var canvas,ctx,xr,yr,len,max;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width=canvas.height=600;
init();
aaa();
function init(){
var a,b,c,d;
a=[1,2,3,5,7,11,13,17,19,23,29,31,37];
xr=[];
yr=[];
c=(a.length-Math.random()*4)|0;
len=a[c];
max=(600/len)|0;
a[c]=a[a.length-1];
a.pop();
for(b=0;b<5;b++){
c=(Math.random()*a.length)|0;
d=a[c];
a[c]=a[a.length-1];
a.pop();
xr.push(d);
c=(Math.random()*a.length)|0;
d=a[c];
a[c]=a[a.length-1];
a.pop();
yr.push(d);
}
}
function aaa(){?
var a,b,c,tx,ty,x,y,r;
ctx.globalCompositeOperation = "source-over";? ? ctx.fillStyle="rgb(0,0,0)";? ? ctx.fillRect(0,0,canvas.width,canvas.height);? ? ctx.globalCompositeOperation = "lighter";
tim=new Date().getTime()/70;
lis(200,200,350*(1+Math.sin(tim/43)*0.2));? ? requestAnimationFrame(aaa);
}
function lis(tx,ty,s){
var a,b,c,d,r,r0,r1,xp,x,y,p,p1,px,py,x0,y0,x1,y1;? ? ctx.lineWidth=3;
xp=tim/37;
r0=tim/29/len*10;
for(a=0;a=0;b--)ctx.lineTo(p1[b][0],p1[b][1]);
ctx.stroke();
ctx.fill();
r0+=Math.PI*2/len;
}
function pp(r,gy){
var a,x,y,cos,sin;
if(gy){
sin=Math.cos;
cos=Math.sin;
}else{
cos=Math.cos;
sin=Math.sin;
}
x=y=0;
for(a=0;a<5;a++){
x+=cos(r*xr[a]+xp+a)/(1+xr[a]/2+a);
y+=sin(r*yr[a]+a)/(1+yr[a]/2+a);
}
return [x*s,y*s];
}
}
現(xiàn)在打開你的瀏覽器 我們來看看效果
每次點(diǎn)擊切換一種顯示效果
謝謝你的閱讀。
請(qǐng)關(guān)注我的簡書專欄“web編程”躏哩，每天不定期更新好玩的編程教程署浩。
了解更多資訊請(qǐng)關(guān)注微信公眾號(hào)：芒果web 或者微信搜索（javascriptes6）
將您的查詢和反饋發(fā)送到我們的微信公眾號(hào)或在我們的QQ群460582514討論。您也可以在下面評(píng)論您的問題扫尺。
另外瑰抵，別忘了訂閱我們。
如果你喜歡這篇文章器联，那么請(qǐng)分享一下二汛，幫助我們成長。
