Javascript 绘制 sin 曲线过程附图

Javascript 绘制 sin 曲线代码如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#MyCanvas {
background-color: cornflowerblue;
}
</style>
<script type="text/javascript">
function draw(){
var my_canvas = document.getElementById( "MyCanvas" );
var content = my_canvas.getContext( "2d" );
content.beginPath();
content.moveTo( 10, 100 );
for( var i = 1; i < 200; i += 0.1 ){
var x = i * 10;
var y = Math.sin( i ) * 10 + 100;
content.lineTo( x, y );
}
content.stroke();
content.closePath(); 

}
</script>
</head>
<body onload="draw()">
<canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>

动态效果：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#MyCanvas {
background-color: cornflowerblue;
}
</style>
<script type="text/javascript">
var i = 1;
var x = 1;
var y = 100;
function moveSin(){
var my_canvas = document.getElementById( "MyCanvas" );
var content = my_canvas.getContext( "2d" );
content.beginPath();
content.moveTo( x, y );
i += 0.1;
x = i * 10;
y = Math.sin( i ) * 10 + 100;
content.lineTo( x, y );
content.stroke();
content.closePath();
}
setInterval( moveSin, 10 );
</script>
</head>
<body onload="moveSin()">
<canvas id = "MyCanvas" width="400" height="400"></canvas>
</body>
</html>
赞 (0)

相关推荐

  • 12行javascript代码绘制一个八卦图

    一句话说明:用有限的代码构建一个1024*1024的颜色矩阵,秀出你的编程&艺术之美 起源于 stackexchange 上的一个问题, 这里稍微做了一下扩展,支持更多编程语言,并放宽了代码长度的限制. 规则 目标: 通过实现 模版 中的一个函数 get_color_at(x, y) ,在一个 1024*1024 的画布上画出尽可能 "有意思" 的图案. 参数: int x, int y ,取值均为 0 - 1023,对应画布上坐标点,左上角为起始点 (0,0) 返回: int

  • Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Ex

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • Javascript 绘制 sin 曲线过程附图

    Javascript 绘制 sin 曲线过程附图

    Javascript 绘制 sin 曲线代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> #MyCanvas { background-color: cornflowerblue; } </style> <script type="text/javascript"> function draw(){ var my_canvas

  • Android 使用cos和sin绘制复合曲线动画

    Android 使用cos和sin绘制复合曲线动画

    前言 前两周在开发新需求的时候,设计给了一份类似这样的动画: 看着不难,即使一遍看不懂,嘿嘿,不还有设计稿. 作为一个平时很少写动画的 Android 开发仔,看到一段段的缓入缓出曲线的设计稿时,我的心情是这样的: 虽然,Android 动画默认的插值器 AccelerateDecelerateInterpolator 有这样缓入缓出的效果: 我总不能一整个动画给它拆成4段动画来写,还别说,我第一次写的代码还真的是这么干的. 第一次分析 本着能少写一行绝不多写一字的原则,询问了大佬同事的意见,大

  • Qt自定义Plot实现曲线绘制的详细过程

    Qt自定义Plot实现曲线绘制的详细过程

    简介 实现了qt绘制曲线功能,包含arm触摸屏多点触控缩放(只支持两点),实时曲线绘制,数据点根据绘制宽度优化,跟踪点数据获取,双坐标等功能 演示 代码 头文件 plot.h /* * 作者:老人与海 * 博客:https://blog.csdn.net/qq_41340733 * 代码不保证稳定性,请勿用于商业用途 */ #ifndef PLOT_H #define PLOT_H #include <QWidget> #include <QTimer> #include <

  • 基于JavaScript canvas绘制贝塞尔曲线

    简单描述:页面上有四个点,鼠标拖动四个点的位置来改变贝塞尔曲线的形状,双击放置点位 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{overflow: hidden;} * {padding: 0;margin: 0;}

  • Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

  • 使用python和pygame绘制繁花曲线的方法

    前段时间看了一期<最强大脑>,里面各种繁花曲线组合成了非常美丽的图形,一时心血来潮,想尝试自己用代码绘制繁花曲线,想怎么组合就怎么组合. 真实的繁花曲线使用一种称为繁花曲线规的小玩意绘制,繁花曲线规由相互契合大小两个圆组成,用笔插在小圆上的一个孔中,紧贴大圆的内壁滚动,就可以绘制出漂亮的图案.这个过程可以做一个抽象:有两个半径不相等的圆,大圆位置固定,小圆在大圆内部,小圆紧贴着大圆内壁滚动,求小圆上的某一点走过的轨迹. 进一步分析,小圆的运动可以分解为两个部分:小圆圆心绕大圆圆心公转.小圆绕自

  • javascript绘制漂亮的心型线效果完整实例

    javascript绘制漂亮的心型线效果完整实例

    本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%;

  • JavaScript 绘制饼图的示例

    JavaScript 绘制饼图的示例

    绘制效果 实现代码 JavaScript var canvas = document.getElementById("mycanvas"); var w = window.innerWidth; var h = window.innerHeight; canvas.height = 1000; canvas.width = 1400; var ctx = canvas.getContext('2d'); var poppable = true; var slices = []; fun

  • 关于Matplotlib绘制动态实时曲线的方法改进指南

    关于Matplotlib绘制动态实时曲线的方法改进指南

    很多时候,我们需要实时的绘制曲线,如实时的绘制串口接收到的数据.最先想到的解决策略是类似于Matlab种的drawnow函数. 在python中Matplotlib库有着和Matlan绘图库相似的功能,但是并没有drawnow这样的函数. 已有的解决方案 通过网上现有的资料 基于Python实现matplotlib中动态更新图片(交互式绘图),可以通过打开Matplotlib的交互模式来实现实时绘图的目的,此时需要用到函数matplotlib.pyplot.ion 存在的问题 通过上述方法实时绘

  • Python+NumPy绘制常见曲线的方法详解

    Python+NumPy绘制常见曲线的方法详解

    目录 一.利萨茹曲线 二.计算斐波那契数列 三.方波 四.锯齿波和三角波 在NumPy中,所有的标准三角函数如sin.cos.tan等均有对应的通用函数. 一.利萨茹曲线 (Lissajous curve)利萨茹曲线是一种很有趣的使用三角函数的方式(示波器上显示出利萨茹曲线).利萨茹曲线由以下参数方程定义: x = A sin(at + n/2) y = B sin(bt) 利萨茹曲线的参数包括 A . B . a 和 b .为简单起见,我们令 A 和 B 均为1,设置的参数为 a=9 , b=

随机推荐