canvas-画一颗心
一、思路
采用三次贝塞尔曲线，因为曲线度数不是二次可以控制的，其次就是自己找一个有坐标的心，大概找到控制点，画完一半就可以对称完成
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas</title>
</head>
<body onload="draw();">
<canvas width="500" height="500" id="canvas"></canvas>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(40,30);
ctx.bezierCurveTo(40,20,30,10,20,10);
ctx.bezierCurveTo(10,10,0,20,0,30);
ctx.bezierCurveTo(2,45,16,60,40,80);
ctx.bezierCurveTo(64,60,78,45,80,30);
ctx.bezierCurveTo(80,20,70,10,60,10);
ctx.bezierCurveTo(50,10,40,20,40,30);
ctx.fillStyle = '#ff0000';
ctx.fill();
ctx.fillStyle = "#000000";//颜色
ctx.font = "normal 20px 微软雅黑";//字体
ctx.textBaseline = "middle";//竖直对齐
ctx.textAlign = "center";//水平对齐
// ctx.moveTo(40,30);
ctx.fillText("邢悦", 40, 45, 40);
}
}
</script>
</body>
</html>
