HTML5 Canvas动态绘制心型线和玫瑰线

1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画。本次将运用canvas绘制心型线和玫瑰线。

1.心型线和玫瑰线

绘制这两种曲线,首先我们分别选用两个参数方程(心型线和玫瑰线的参数方程不同,其形态特征也不一样,你可以根据你的需要选择合适的参数方程)
桃心型线的参数方程:
x = 16 (sinθ)^3
y = 13 cosθ- 5 cos 2θ - 2 cos 3θ - cos 4θ
玫瑰线的参数方程:
x=sin4θ×cosθ
y=sin4θ×sinθ

2.绘制

假设我们在html页面中有一个Canvas元素,其Id为drawing。(注意利用CSS样式设置的Canvas的高度和宽度只是元素显示的高度和宽度,并不是画布的高度和宽度,后者是不带单位的,这点尤为重要。初次使用时,我用Css设置了宽度为300px,高度为300px的canvas元素,想画一个正方形,最终显示结果却是一个矩形,原来画布默认大小为300×150并没有被改变,他使我的绘制的图形发生了缩放。关于画布大小的设置可以参考这篇博客:http://blog.csdn.net/csm0912/article/details/52963240
接着我们通过Id选取该Canvas元素,在绘图之前需要使用getContext()方法取得绘图上下文。接着就根据参数方程开始绘制路径了,主要使用lineTo()方法绘制。代码如下:

function draw(){
	var drawing = document.getElementById("drawing"); //获取canvas元素
	drawing.width = '500'; //设置画布大小
	drawing.height = '500';
	if (drawing.getContext){  //获取绘图上下文
		var content = drawing.getContext("2d"),
			radian = 0,   //设置初始弧度
			radian_add = Math.PI/180;  //设置弧度增量
		content.beginPath();  //开始绘图
		content.translate(250,250);  //设置绘图原点
		content.moveTo(getX(radian),getY(radian)); //移动绘图游标至原点
		while(radian <= (Math.PI*2)){  //每增加一次弧度,绘制一条线
			radian += radian_add;
			X = getX(radian);
			Y = getY(radian);
			content.lineTo(X,Y);
		}
		content.strokeStyle = "red";  //设置描边样式
		content.stroke();  //对路径描边
	}
}

function getX(t){   //获取玫瑰线的X坐标
	return 100 * Math.sin(4*t)*Math.cos(t);
}

function getY(t){  //获取玫瑰线的Y坐标
	return 100 * Math.sin(4*t)*Math.sin(t);
}

function getX1(t){  //获取心型线的X坐标
	return 15*(16*Math.pow(Math.sin(t),3))
}

function getY1(t){  //获取心型线的Y坐标
	return -15*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t))
}

效果如下:
这里写图片描述

这里写图片描述

3.动态绘制线条以及用图片描边

我们可以结合drawImage()和setInterval()方法,用图片(例如一朵小花)来动态绘制曲线,只需修改部分代码,以心型线举例:
修改的draw()代码如下:

function draw(){
	var drawing = document.getElementById("drawing"),
		pic = document.getElementById('flower'); //获取描边图片
	drawing.width = '500';
	drawing.height = '500';
	if (drawing.getContext){
		var content = drawing.getContext("2d"),
			radian = 0,
			radian_add = Math.PI/40;
		content.translate(250,250);
		function heart(){
			X = getX1(radian);
			Y = getY1(radian);
			content.drawImage(pic,X,Y,25,25);   //在给定坐标绘制给定大小的图片
			radian+=radian_add;
			if (radian > (2*Math.PI)){ //绘制完整的心型线后取消间歇调用 
				clearInterval(intervalId);
			}
		}
		intervalId = setInterval(heart,100);  //设置间歇调用,间隔为100ms
	}
}

效果如下:
这里写图片描述

这里写图片描述

这里写图片描述


如果觉得这篇文章帮助了您,请打赏一个小红包鼓励作者继续创作哦!!!

在这里插入图片描述

  • 5
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值