心形一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#MyCanvas {
border: 1px solid lightblue;
}
</style>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("MyCanvas").getContext("2d");
ctx.width = document.documentElement.clientWidth-20;
ctx.height = document.documentElement.clientHeight-20;
var r = 4;
function drawHeart() {
var num = 40; //分割为360个点绘制
var redian;
var startRedian = Math.PI;
var redianDecrement;
var i = 0;
var time = 100;
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
redian = startRedian;
redianDecrement = 2 * Math.PI / num;
ctx.moveTo(getX(redian), getY(redian));
var intervalId = setInterval(function(){
redian += redianDecrement;
ctx.lineTo(getX(redian), getY(redian));
i++;
ctx.stroke();
if (i >= num) {
clearInterval(intervalId);
}
}, time);
ctx.font = "30px 宋体";
ctx.strokeText("子寒", 120, 222);
ctx.strokeText("芳芳", 600, 222);
}
function getX(t) {
return 400 + r * (16 * Math.pow(Math.sin(t), 3));
}
function getY(t) {
return 200 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
}
drawHeart();
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="800" height="800"></canvas>
</body>
</html>
心形二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="can" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
var can=document.getElementById("can");
var ctx=can.getContext("2d");
var x=200;
var y=100;
var x1=250;
var y1=100;
setInterval(function(){
// ctx.clearRect(0,0,800,600);
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle="red";
ctx.rect(x,y,2,2);
if(x>=200 && x<=250 && y>=50 && y<=100)
{
x+=1;
y-=1;
}
if(x>=250 && x<=300 && y>=50 && y<=100)
{
x+=1;
y+=1;
}
if(x>=200 && x<=300 && y>=100 && y<=200)
{
x-=1;
y+=1;
}
if(x>=100 && x<=200 && y>=100 && y<=200)
{
x-=1;
y-=1;
}
if(x>=100 && x<=150 && y>=50 && y<=100)
{
x+=1;
y-=1;
}
if(x>=150 && x<=200 && y>=50 && y<=100)
{
x+=1;
y+=1;
}
ctx.closePath();
ctx.stroke();
},10);
</script>
</html>
心形三
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="can" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
var can=document.getElementById("can");
var ctx=can.getContext("2d");
var x=200;
var y=100;
var x1=250;
var y1=100;
setInterval(function(){
// ctx.clearRect(0,0,800,600);
ctx.beginPath();
ctx.arc(250,100,50,-180*Math.PI/180,45*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(150,100,50,-215*Math.PI/180,0*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.lineTo(285,135);
ctx.lineTo(200,230);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.lineTo(109,129);
ctx.lineTo(200,230);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.font = "40px 华文隶书";
ctx.strokeText("子寒", 160, 160);
},10);
</script>
</html>
心形美少女
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="can" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
var can=document.getElementById("can");
var ctx=can.getContext("2d");
setInterval(function(){
// ctx.clearRect(0,0,800,600);
ctx.beginPath();
ctx.arc(250,100,50,-180*Math.PI/180,45*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(150,100,50,-215*Math.PI/180,0*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.lineTo(285,135);
ctx.lineTo(200,230);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.lineTo(109,129);
ctx.lineTo(200,230);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
//左眉毛
ctx.beginPath();
ctx.arc(150,120,20,-150*Math.PI/180,-30*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
//左眼
ctx.beginPath();
ctx.arc(150,130,15,-150*Math.PI/180,-30*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(150,115,15,30*Math.PI/180,150*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
//眼珠
ctx.beginPath();
ctx.arc(150,120,5,0*Math.PI/180,360*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
//右眉毛
ctx.beginPath();
ctx.arc(250,120,20,-150*Math.PI/180,-30*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(250,130,15,-150*Math.PI/180,-30*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(250,115,15,30*Math.PI/180,150*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
//眼珠
ctx.beginPath();
ctx.arc(250,120,5,0*Math.PI/180,360*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
//嘴巴
ctx.beginPath();
ctx.arc(200,170,20,30*Math.PI/180,150*Math.PI/180);
ctx.strokeStyle="red";
// ctx.closePath();
ctx.stroke();
},10);
</script>
</html>