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

曾经终败给现在 2022-06-06 01:43 168阅读 0赞

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（）方法绘制。代码如下：

效果如下：  
![这里写图片描述][format_png]

![这里写图片描述][format_png 1]

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

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

效果如下：  
![这里写图片描述][format_png 2]

![这里写图片描述][format_png 3]

![这里写图片描述][format_png 4]

--------------------

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[format_png]: /images/20220606/9ac611e4149f45729a691fbd327089c3.png
[format_png 1]: /images/20220606/31e056c7e9134dfd862dff65452a33d8.png
[format_png 2]: /images/20220606/2de07bc63d8241bcb583a34c8aaf2720.png
[format_png 3]: /images/20220606/cbe04279923d409bba48ef2b49797f4c.png
[format_png 4]: /images/20220606/2a495aec5f1b4460be9abc470aeb9a8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220606/e59b190197714fe8a122a89eb03cf92c.png