心形图案用php,HTML_HTML5 Canvas实现玫瑰曲线和心形图案的代码实例，效果图： 提示：把代码 - phpStudy...

HTML5 Canvas实现玫瑰曲线和心形图案的代码实例

效果图：

提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。

实现代码：

复制代码代码如下:

HTML5 Demo

#apDiv1 {

position:absolute;

width:120px;

height:300px;

z-index:1;

left: 840px;

top: 80px;

}

Your browser does not support the canvas element.

玫瑰曲线方程：

r=a+bsin(m/n*x)

选择参数：

m:

n:

a:

b:

---

---

function draw() {

var ctx = document.getElementById('canvas').getContext('2d');

ctx.save();

ctx.translate(400,300);

ctx.clearRect(-400,-300,800,600);

ctx.strokeStyle = "#cc0000";

var a = 0, b = 1, m = 6, n = 1;

m = document.forms[0].m.value;

n = document.forms[0].n.value;

a = document.forms[0].a.value;

b = document.forms[0].b.value;

drawRose(ctx,a,b,m,n);

ctx.restore();

}

function drawRose(ctx,a,b,m,n){

ctx.beginPath();

var e = 0, c = 120;

var k = 2 * Math.PI / 360;

do {

var r = a/b + Math.sin( m * e / n * k);

r = r * c;

var x = r * Math.cos( e * k );

var y = r * Math.sin( e * k );

e += 0.1;

ctx.lineTo(x,y);

} while ( e <= 4320 );

ctx.stroke();

}

function draw2(){

var ctx = document.getElementById('canvas').getContext('2d');

ctx.save();

ctx.translate(400,300);

ctx.clearRect(-400,-300,800,600);

ctx.strokeStyle = "#cc0000";

ctx.beginPath(); //ctx.moveTo(0,0);

var e = 0, c = 150;

var k = 2 * Math.PI / 360;

do {

x = 150*Math.cos( 5/2 * e*k ) + 50*Math.cos( 15/16 * 5/2 * e*k );

y = 150*Math.sin( 5/2 * e*k ) - 50*Math.sin( 15/16 * 5/2 * e*k );

e += 0.1;

ctx.lineTo(x,y);

} while ( e <= 3600 );

ctx.stroke();

ctx.restore();

}

function draw3(){

var ctx = document.getElementById('canvas').getContext('2d');

ctx.save();

ctx.translate(400,300);

ctx.clearRect(-400,-300,800,600);

ctx.strokeStyle = "#ff0000";

ctx.beginPath();

var x = 1, y;

do {

y = -80*(Math.sqrt(1-x*x) + Math.pow(x*x,1/3));

x -= 0.001;

ctx.lineTo(100*x,y);

} while ( x >= -1 );

do {

y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3));

x += 0.001;

ctx.lineTo(100*x,y);

} while ( x <= 1 );

ctx.closePath();

var grad = ctx.createRadialGradient(-40,-60,10,-40,-40,200);

grad.addColorStop(0, "#ffcc00");

grad.addColorStop(1, "#ff0000");

ctx.fillStyle = grad;

ctx.fill();

// ctx.stroke();

ctx.restore();

}

window.onload = function (){

draw();

}

相关阅读:

Android开发 -- 状态栏通知Notification、NotificationManager详解

html 弹出div实现移动居中非常好用

使用Javascript写的2048小游戏

javascript背景时钟实现方法

js实现回放拖拽轨迹从过程上进行分析

PHP Warning: Module 'modulename' already loaded in问题解决办法

C#实现随机数产生类实例

oracle 数据泵导入导出介绍

SQLServer 2008 CDC功能实现数据变更捕获脚本

win7系统封装详细教程_Windows7系统封装步骤(详细图解)

Linux系统下wget命令的使用教程

C++实现十六进制字符串转换为十进制整数的方法

ubuntu15.04英文版界面怎么设置成中文？

深入探究TimSort对归并排序算法的优化及Java实现