HTML5中怎么使用Canvas动态绘制心型线和玫瑰线

本篇内容主要讲解“HTML5中怎么使用Canvas动态绘制心型线和玫瑰线”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5中怎么使用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并没有被改变，他使我的绘制的图形发生了缩放。

　　接着我们通过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

　　}

　　}

到此，相信大家对“HTML5中怎么使用Canvas动态绘制心型线和玫瑰线”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！