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

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

 
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<title>Titletitle> 
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>

你可能感兴趣的:(神奇的Canvas贝塞尔曲线画心,程序员的表白)