<html>
<head>
<title>Draw Heart</title>
<style type="text/css">
* {
margin: 0
padding: 0
}
html {
height: 100%
margin: 0
}
body {
height: 100%
background-color:white
}
#canvasZone {
width: 100%
height: 100%
text-align: center
background-color: black
}
#myCanvas {
height:100%
display: block
/*background-color:aqua*/
}
</style>
<script type="text/javascript">
var arr = []//保存所有的XY坐标，只为验证。实际程序中可删除。
var r = 4
var radian//弧度
var i
var radianDecrement//弧度增量
var time = 10//每个点之间的时间间隔
var intervalId
var num = 360//分割为 360 个点
var startRadian = Math.PI
var ctx
window.onload = function () {
startAnimation()
}
function startAnimation() {
ctx = document.getElementById("myCanvas").getContext("2d")
//让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。
WINDOW_HEIGHT=document.documentElement.clientHeight-20
WINDOW_WIDTH=document.documentElement.clientWidth-20
ctx.width = WINDOW_WIDTH
ctx.heigh = WINDOW_HEIGHT
drawHeart()
}
function drawHeart() {
ctx.strokeStyle = "red"
ctx.lineWidth = 1//设置线的宽度
radian = startRadian//弧度设为初始弧度
radianDecrement = Math.PI / num * 2
ctx.moveTo(getX(radian), getY(radian))//移动到初始点
i = 0
intervalId = setInterval("printHeart()", time)
}
//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
function printHeart() {
radian += radianDecrement
ctx.lineTo(getX(radian), getY(radian))//在旧点和新点之间连线
//arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>")
i++
ctx.stroke()//画线
if (i >= num) {
clearInterval(intervalId)
//document.getElementById("bs").innerHTML = arr.join("")//打印所有的XY坐标点。
}
}
function getX(t) {//由弧度得到 X 坐标
return 100 + r * (16 * Math.pow(Math.sin(t), 3))
}
function getY(t) {//由弧度得到 Y 坐标
return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
}
</script>
</head>
<body>
<div id="canvasZone">
<canvas id="myCanvas"></canvas>
</div>
<div id="bs">
</div>
</body>
</html>
在Sublime中制作爱心代码需要了解以下几个步骤：1. 选择文件类型：需要创建一个新的HTML文件。
2. 在HTML文件中设置并定义一个canvas用来绘制爱心的形状。在其中使用context.beginPath()和context.moveTo()方法，分别创建新路径并设置起点。设置径向渐变以绘制爱心的颜色，并使用context.arc()方法实现爱心形状。
3. 在CSS中设置canvas的CSS样式，设定canvas的宽高及爱心的颜色和栏杆的颜色。
4. 再次在HTML中使用<script...>元素引入JavaScript代码，在其中添加事件处理程序和定时器，以实现绘制爱心的动画效果。
以上就是制作爱心代码的大体步骤，需要了解HTML、CSS、JavaScript等知识。
用方程的话肯定输出不会和你的图完全一致
心形线方程如图
用上面行第二个比较简单，程序如下
#include <stdio.h>bool draw(float x, float y)
{
float a = x * x + y * y - 1.0
float b = x * x * y * y * y
return a * a * a - b <= 0
}
int main(int argc, char* argv[])
{
for (float y = 1.5 y >= -1.5 y -= 0.1)
{
for (float x = -1.2 x <= 1.2 x += 0.05)
{
if (draw(x, y))
{
bool left = draw(x - 0.05, y)
bool right = draw(x + 0.05, y)
bool up = draw(x, y + 0.1)
bool down = draw(x, y - 0.1)
if (left && right && up && down)
printf(" ")
else
printf("*")
}
else
printf(" ")
}
printf("\n")
}
return 0
}
draw函数是判断（x，y）坐标是否在心形范围内
主函数循环，y取值±1.5之间，步长0.1，x取值±1.2之间，步长0.05
如果（x，y）坐标在心形范围外打印空格
如果（x，y）坐标在心形范围内，由于这个心是空心的，要继续判断是不是心形边缘，判断周围4个点坐标，如果都在范围内，表示（x，y）坐标不会是边缘，打印空格，否则是边缘，打印星号
最终结果如图
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）