html5+canvas+九宫格,HTML5+canvas一箭穿心

表白神器

HTML5的canvas画一箭穿心

作为一个专业得程序员，咱们的表白怎能一个送花，几句情话了得，当然是要上代码啦！！！

Draw Heart

* {

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;

}

Your browser does not support the audio element.

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));

}

标签：function,canvas,ctx,弧度,HTML5,var,穿心,Math,radian

来源： https://blog.csdn.net/qq_43220836/article/details/85945405