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并没有被改变，他使我的绘制的图形发生了缩放。

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

效果如下：

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并没有被改变，他使我的绘制的图形发生了缩放。

接着我们通过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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！