分享更有价值
被信任是一种快乐

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

文章页正文上

本篇内容主要讲解“HTML5中怎么使用Canvas动态绘制心型线和玫瑰线”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5中怎么使用Canvas动态绘制心型线和玫瑰线”吧!
  1.心型线和玫瑰线
  绘制这两种曲线,首先我们分别选用两个参免费云主机、域名数方程(心型线和玫瑰线的参数方程不同,其形态特征也不一样,你可以根据你的需要选择合适的参数方程)
  桃心型线的参数方程:
  x = 16 (sin)^3
  y = 13 cos- 5 cos 2 – 2 cos 3 – cos 4
  玫瑰线的参数方程:
  x=sin4cos
  y=sin4sin
  2.绘制
  假设我们在html页面中有一个Canvas元素,其Id为drawing。(注意利用CSS样式设置的Canvas的高度和宽度只是元素显示的高度和宽度,并不是画布的高度和宽度,后者是不带单位的,这点尤为重要。初次使用时,我用Css设置了宽度为300px,高度为300px的canvas元素,想画一个正方形,最终显示结果却是一个矩形,原来画布默认大小为300150并没有被改变,他使我的绘制的图形发生了缩放。
  接着我们通过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

  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动态绘制心型线和玫瑰线”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: html标签是闭合还是不闭合

这篇文章主要介绍“html标签是闭合还是不闭合”,在日常操作中,相信很多人在html标签是闭合还是不闭合问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html标签是闭合还是不闭合”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册