canvas
先使用html定义一个
js绘制canvas图形
绘制饱圆心型var $id = function(n) { return document.getElementById(n) || n; }window.addEventListener('load', draw, false); var con = $id('pad').getContext('2d'); con.fillStyle = '#e21f27' con.translate(200, 100); function draw() {var r = 0,a = 100,start = 0,end = 0;con.rotate(Math.PI); for (var q = 0; q < 500; q++) { start += Math.PI * 2 / 500; end = start + Math.PI * 2 / 500; r = a * (1 - Math.sin(start)); //心形极坐标表示法 con.arc(0, 0, r, start, end, false); } con.fill(); }
var $id = function(n) {return document.getElementById(n) || n;}window.addEventListener('load', draw, false);var con = $id('pad').getContext('2d');con.fillStyle = '#e21f27'con.translate(100, 100); function draw() {var r = 0,a = 20,start = 0,end = 0;con.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))))con.arc(0, 0, r, start, end, false);}con.fill();}