标签：function canvas ctx 弧度 HTML5 var 穿心 Math radian
表白神器
HTML5的canvas画一箭穿心
作为一个专业得程序员，咱们的表白怎能一个送花，几句情话了得，当然是要上代码啦！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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;*/
}
.text {
width: 220px;
height: 520px;
display: block;
top: 70px;
right: 50px;
color: aqua;
background-color: black;
position: fixed;
}
</style>
</head>
<body>
<div id="text" class="text">
</div>
<div id="canvasZone">
<canvas id="myCanvas"></canvas>
</div>
<audio src="love.mp3" autoplay="autoplay">
Your browser does not support the audio element.
</audio>
</body>
<script type="text/javascript">
var r = 3;
var radian; //弧度
var i;
var radianDecrement; //弧度增量
var time = 5; //每个点之间的时间间隔
var intervalId;
var num = 360; //分割为 360 个点
var startRadian = Math.PI;
var ctx;
var startX = 100;
var startY = 80;
window.onload = function() {
startAnimation();
setTimeout(function() {
startX = 155;
startY = 70;
ctx.moveTo(startX, startY);
drawHeart();
ctx.strokeStyle = "aqua"
}, 2500);
setTimeout(function() {
textLove();
}, 6000);
setTimeout(function() {
ctx.strokeStyle = "red"
addText();
}, 6000)
}
function textLove() {
ctx.lineWidth = 2;
var x = 40;
var y = 100;
ctx.moveTo(x, y);
textLove = setInterval(function(){
ctx.lineTo(x, 110-0.25*x);
x++;
y++;
ctx.stroke();
if(x==220){
clearInterval(textLove)
}
},10);
setTimeout(function(){
ctx.strokeStyle = "aqua"
ctx.lineTo(220, 55);
ctx.lineTo(210, 50)
ctx.moveTo(221, 55);
ctx.lineTo(213, 65);
ctx.stroke();
},1900);
}
function addText() {
var context = "这里可以放一段告白得文字，把你想说得内容写下来，也就是告白得话！";
let arr = new Array();
arr = context.split("");
var str = "";
var index = 0;
addText = setInterval(function() {
str = document.getElementById("text").innerText;
str += arr[index];
index++;
document.getElementById("text").innerText = str;
if (index == arr.length) {
clearInterval(addText)
}
}, 120)
}
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 = 2; //设置线的宽度
radian = startRadian; //弧度设为初始弧度
radianDecrement = Math.PI / num * 2;
ctx.moveTo(getX(radian), getY(radian)); //移动到初始点
i = 0;
intervalId = setInterval("printHeart()", time);
}
function printHeart() {
radian += radianDecrement;
ctx.lineTo(getX(radian), getY(radian)); //在旧点和新点之间连线
i++;
ctx.stroke(); //画线
if (i >= num) {
clearInterval(intervalId);
}
}
function getX(t) { //由弧度得到 X 坐标
return startX + r * (16 * Math.pow(Math.sin(t), 3));
}
function getY(t) { //由弧度得到 Y 坐标
return startY - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
}
</script>
</html>
标签：function,canvas,ctx,弧度,HTML5,var,穿心,Math,radian 来源： https://blog.csdn.net/qq_43220836/article/details/85945405
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。