您的位置：首页 > Web前端 > HTML5

[转] HTML5 Canvas Heart

2011-05-05 11:35 651 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>

<canvas id="canvas" width='1000' height='1000' style='border:1px solid #c3c3c3;'>Your browser does not support the canvas element.</canvas>

<script type="text/javascript">

var dd = document.getElementById("canvas").getContext("2d");
dd.fillStyle='#ff3300'
dd.translate(300,100);

function draw(){
var r=0 , a=20 , start = 0 , end= 0;
dd.rotate(Math.PI);
for(var q=0; q<1000; q++){
start +=  Math.PI * 2 /1000;
end = start + Math.PI * 2 /1000;
r=a*Math.sqrt(225/(17-16*Math.sin(start)*Math.sqrt(Math.cos(start)*Math.cos(start))))
dd.arc(0,0,r,start,end,false);
}
dd.fill();
}

draw();

</script>

</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5 Canvas

相关文章推荐

新的分享

章节导航