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

最新推荐文章于 2024-08-23 23:57:06 发布

html5_css3_js

最新推荐文章于 2024-08-23 23:57:06 发布

阅读量5k

点赞数 2

文章标签：程序员 canvas

本文链接：https://blog.csdn.net/html5_css3_js/article/details/80126526

版权

这篇博客介绍如何使用HTML5 Canvas结合贝塞尔曲线技术绘制爱心图形，适合程序员们用于创意表白，提供了基础的爱心轮廓代码供读者进一步定制。

摘要由CSDN通过智能技术生成

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>