1 HTML 5的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.绘制
假设我们在ht ML 页面中有一个Canvas元素，其Id为drawing。（注意 利用 CSS 样式设置的Canvas的高度和 宽 度只是元素显示的高度和宽度，并不是 画布 的高度和宽度，后者是不带单位的，这点尤为 重要 。初次使用时，我用Css设置了宽度为300px，高度为300px的canvas元素，想画一个正方形，最终显示结果却是一个矩形， 原来 画布默认大小为300×150并没有被 改变 ，他使我的绘制的图形发生了缩放。
接着我们通过Id选取该Canvas元素，在绘图之前需要使用getContext（）方法取得绘图上下文。接着就根据参数方程 开始 绘制路径了，主要使用l inet o（）方法绘制。代码如下：
function draw(){ VAR drawing = document.getElementById("drawing"); //获取canvas元素 drawing.width = & # 39;500'; //设置画布大小 drawing.h ei ght = '500'; if (drawing.getContext){ //获取绘图上下文 var content = drawing.getContext("2d"), radian = 0, //设置初始弧度 radian_add = Math.PI/180; //设置弧度增量 content.be gin Path(); //开始绘图 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. stroke Style = " 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 } } 效果如下：
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5使用Canvas动态绘制心型线和玫瑰线的教程 全部内容，希望文章能够帮你解决 html5教程-HTML5使用Canvas动态绘制心型线和玫瑰线的教程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5使用Canvas动态绘制心型线和玫瑰线的教程的详细内容...