android 画布心形,利用canvas绘制爱心

需求：绘制爱心图像轨迹。

实现：直接贴代码吧！

预览地址：绘制爱心图像轨迹

模仿笔画

#_canvas {

background-color: rgb(240, 240, 240);

border: 1px solid #000;

}

sorry, your broswer does not support html5!

var canvas_ = document.getElementById("_canvas");

var context = canvas_.getContext("2d");

//线条设置

context.strokeStyle = "red";

context.lineWidth = 2;

//线条数组

var array_paint = [];

//背景图

var img = new Image()

img.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fv5kg78i8kj30xc0m8ank.jpg"

context.drawImage(img, 0, 0);

function paint() {

context.beginPath();

context.moveTo(array_paint[0][0], array_paint[0][1]);

if (array_paint.length == 1)

context.lineTo(array_paint[0][0] + 1, array_paint[0][1] + 1);

else {

var i = 1;

for (i in array_paint) {

context.lineTo(array_paint[i][0], array_paint[i][1]);

context.moveTo(array_paint[i][0], array_paint[i][1]);

}

}

context.closePath();

context.stroke();

}

let num = -1;

let timer = null;

let list = []

//创建坐标

list = heartShape(20, 50, 20)

function people() {

num++;

var imgpeople = new Image()

imgpeople.src = "https://ws1.sinaimg.cn/large/0065nu1aly1fvcmafdhe6j305k05k3ye.jpg"

context.drawImage(imgpeople, list[num].current_x * 500 / 100 - 10, list[num].current_y * 500 / 100 - 20, 20,

20);

context.clearRect(0, 0, screen.width, screen.height);

context.drawImage(img, 0, 0);

console.log(list[num].current_x * 500 / 100);

if (num < list.length - 1) {

let current_x = (Math.random() * 100).toFixed(2);

let current_y = (Math.random() * 100).toFixed(2);

array_paint.push([list[num].current_x * 500 / 100, list[num].current_y * 500 / 100]);

paint();

if (num > 0) {

context.drawImage(imgpeople, list[num].current_x * 500 / 100 - 10, list[num].current_y * 500 / 100 -

20, 20, 20);

}

} else {

array_paint = [];

for (var i = 0; i < list.length; i++) {

array_paint.push([list[i].current_x * 500 / 100, list[i].current_y * 500 / 100]);

paint();

context.drawImage(imgpeople, list[num].current_x * 500 / 100 - 10, list[num].current_y * 500 / 100 -

20, 20, 20);

}

clearInterval(timer);

}

}

timer = setInterval(people, 50)

function heartShape(r, dx, dy) { //r:大小;dx:水平偏移;dy:垂直偏移;

var m, n, x, y, i;

let arr = [];

for (i = 0; i <= 7.9; i += 0.04) {

m = i;

n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) +

2);

x = n * Math.cos(m) + dx;

y = n * Math.sin(m) + dy;

arr.push({

current_x: x,

current_y: y

})

}

return arr

}