html5动态画图,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
}
}
效果如下:
html5动态画图,HTML5使用Canvas动态绘制心型线和玫瑰线的教程相关推荐
- 怎样用html制作动态心,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1html5的canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线 绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
- HTML5 Canvas动态绘制心型线和玫瑰线
1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线 绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
- HTML5 学习手笔二:canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲 用canvas API绘制树木的树冠 为 ...
- MATLAB绘制 心型线 和 马鞍面(双曲抛物面)
写在前面 首先,我们是来学习怎么使用MatLab的,不是来学习高数的,我们只要知道图形对应的表达式就好了,其他的就不用管这么多了. 其次,不用一开始就强迫自己把相应的函数给记住,我们只要记住哪有,要用 ...
- html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效
特效描述:html5绘图工具 canvas 模拟笔迹 绘画特效.html5绘图工具使用鼠标在网页上进行写字,canvas绘画模拟笔迹特效 代码结构 1. HTML代码 sorry! //定义获取id ...
- 用C实现动态绘制“心型线”(心形图形)(数学图形)
1.程序运行环境(必读) Visual C++ 6.0.Visual Studio 2010 ~ Visual Studio 2022 等支持EasyX图形库的软件均可以使用,实现相应功能. ---- ...
- 【HTML5】在canvas上绘制简单的2D图形 (+太极图)
canvas(画布) canvas 元素是H5中新增的一个重要元素,专门用来绘制图形.在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描 ...
- html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图 使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...
- html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下 本文实例讲述了J ...
最新文章
- Could not initialize class org.jetbrains.kotlin.gradle.internal.KotlinSourceSetProviderImplKt
- python读取图片并且显示
- C++知识点杂记1——typedef、static_cast、const_cast、遍历二维数组、聚合类
- android .9 格式图片 背景设置 高度问题 空白问题
- PHP 8 确认支持 JIT
- 启动Tomcat的时候遇到错误
- 中国互联网哪来的所谓“所谓”的创新?“狗日”的腾讯究竟动了谁的蛋糕?...
- 编译AjaxControlToolkit发生错误如何解决?
- c ++类成员函数_仅使用C ++创建具有公共数据成员的类
- Video Analysis 相关领域解读之Video Captioning(视频to文字描述)
- thymeleaf完善前端界面 | 从0开始构建SpringCloud微服务(4)
- 【C练习】两个已经从小到大的数组合并成为一个从小到大排序的数组
- opecv-putText
- Ulipad安装失败解决办法
- 基于R语言的DynNom包绘制动态列线图
- 用uniCloud开发了一个性格测试小程序,已经完美发布【源码开源】
- 实行计算机远程网上录取.啥意思,河北高考今年继续实行计算机远程网上录取...
- MySQL必知必会2
- docker-compose部署lepus 5.0(含lepus-console)
- iOS MP3流媒体播放 边缓冲边播放 FreeStreamer框架
热门文章
- 关于 pygame中,检测按键按下
- “小小的世界大大的你”演讲全文,这是衡中的呐喊,这是我们每个人都该为自己呐喊,我们不甘平庸
- 问:未来5年的IT互联网行业,就业形势会是什么样的?
- 设计模式之访问者模式(C++)
- catalina.home和catalina.base
- ArangoDB——操作案例二
- 【HomeAssistant接入的设备实现天猫精灵】
- app自动化测试appium教程之番外1——进阶补充内容
- 在 MarkDown 中添加表格(例如:在 CSDN 中添加表格)
- 一元三次多项式因式分解的两种方法