怎样用html制作动态心,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
}
}
效果如下:
怎样用html制作动态心,HTML5使用Canvas动态绘制心型线和玫瑰线的教程相关推荐
- html5动态画图,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线 绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- python画图心形_通过matplotlib绘制心形
相关工具库很多,都是科学计算的东西:numpy.scipy.pandas.matplotlib.sympy.mayavi2 SciPy官网的介绍 NumPy's array type augments ...
- python画出心形图-python如何绘制心形
python绘制心形的方法:利用matplotlib和numpy画心形,代码为[init = np.arange(-np.pi, np.pi, 0.001);plt.fill_between(x, y ...
- 矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制 ...
- html5画布椭圆,在html5的Canvas上绘制椭圆的几种方法总结
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: context为Canvas的2D绘图环境对象, x为椭圆中 ...
- html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
- 用php绘制空心圆,html5使用canvas画空心圆与实心圆_html5教程技巧
这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单. 代码如下: var canvas=document.getElementById("canvas&quo ...
- android 画布心形,用CANVAS实现的心形动画效果
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var c = document.getElementById("c"); var ct ...
最新文章
- 谷歌力作:神经网络训练中的Batch依赖性很烦?那就消了它!
- React 虚拟Dom 转成 真实Dom 实现原理
- 用FIO测试存储性能
- python语言是谁发明的咋读-Guido发明的python语言是哪一年正式发布的?
- 【渝粤题库】陕西师范大学152206领导科学 作业(高起专、专升本)
- Flutter快速构建集美观与⾼性能于⼀体的APP
- 计算机二级考试科目python难吗_计算机二级python考试难吗
- FM算法及FFM算法
- 直播app开发中视频编码标准发展史
- Roslyn入门(1):一个简单修改C#代码的例子
- 一个程序员的成长之路(持续更新)
- javaweb response
- 如何将ppt中的绘图高清保存
- 【装机必备】电脑优化清理工具
- C++ —— (两个经纬度计算距离、方位角)、(经纬度A+距离+方位,计算目标经纬度)、(多个经纬度计算面积)
- layui icon 使用
- 企业WiFi安全管家 帮你排忧解难
- linux下的plc软件下载,基于Linux系统的软PLC的实现
- Excel T检验双样本等方差分析
- PTA:宿舍谁最高?