HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，可以创建丰富的图形引用。
在本教程中，我们将学习如何使用canvas 配合javascript制作爱心利萨如曲线，但首先我们将向您介绍canvas，该便签用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，语法如下：
<canvas></canvas>
现在我们将设计一款canvas图形的爱心。本教程适用于表白、搭讪、撩妹、装逼、等等。。。
首先在计算机中的某个地方创建一个文件夹，并在其中创建三个新文件命名index.html，style.css和canvas.js
现在在index.html中输入以下HTML代码
<!DOCTYPE html>
<html>
<head>
<title>cansva实现爱心曲线图</title>
<link rel="stylesheet" herf="style.css">
</head>
<body>
</body>
<sanvas onclick="inint()"></sanvas>
<script type="text/javascript" src="canvas.js"></script>
</html>
现在我们已经准备好了网页结构，打开您的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；
}
现在打开你的浏览器你会发现一片黑暗；现在我们来实现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];
}
}
现在打开你的浏览器 我们来看看效果
每次点击切换一种显示效果
谢谢你的阅读。
请关注我的简书专栏“web编程”，每天不定期更新好玩的编程教程。
了解更多资讯请关注微信公众号：芒果web 或者微信搜索（javascriptes6）
将您的查询和反馈发送到我们的微信公众号或在我们的QQ群460582514讨论。您也可以在下面评论您的问题。
另外，别忘了订阅我们。
如果你喜欢这篇文章，那么请分享一下，帮助我们成长。
网友评论