返回 登录
0

神奇的Canvas贝塞尔曲线画心,程序员的表白

阅读2704

html5 canvase尝试用贝赛尔曲线画心,怎么样?是不是很酷?各位小伙伴,我画了一个心的轮廓,大家可以在此基础上自己加工,表白的时候到了。

<!DOCTYPE html> 
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<div>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas> 
</div> 
<script> 
window.onload = function () { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 800; 
    canvas.height = 800; 
    drawHeart(ctx,400,400,50,30); 
} 
function drawHeart(ctx,x,y,R,rot) { 
    ctx.save(); 
    ctx.translate(x,y); 
    ctx.rotate(rot/180*Math.PI); 
    ctx.scale(R, R); 
    heartPath(ctx);
     /*ctx.strokeStyle = "red"; ctx.lineWidth = "3px";*/ 
     ctx.fillStyle = "red"; 
     ctx.shadowColor = "gray"; 
     ctx.shadowOffsetX = 5; 
     ctx.shadowOffsetY = 5; 
     ctx.shadowBlur = 5; ctx.fill(); 
     //ctx.stroke(); ctx.restore(); 
} 
function heartPath(ctx) { 
    ctx.beginPath(); 
    ctx.arc(-1,0,1,Math.PI,0,false); 
    ctx.arc(1,0,1,Math.PI,0,false); //貝塞尔曲线画心 
    ctx.bezierCurveTo(1.9, 1.2, 0.6, 1.6, 0, 3.0); 
    ctx.bezierCurveTo( -0.6, 1.6,-1.9, 1.2,-2,0); 
    ctx.closePath(); 
} 
</script> 
</body> 

</html>
评论