<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function huadian(x,y){
document.write("<div style='height:3px;position:absolute;left:"+x+"px;top:"+y+"px;width:5px;background:#f00;'></div>")
}
function cycle(cx,cy,r){
//r wei r
var cyclex,cycley,radio;
var pi=Math.PI;
huadian(cx,cy);
//花半径r
//如何取到以半径为r的画圆的所有的坐标呢?
for(var i=0;i<360;i+=0.5){
radio=i*pi/180;
cyclex=r*Math.cos(radio)+cx;
cycley=r*Math.sin(radio)+cy;
huadian(cyclex,cycley);
}
}
//斜率求y柱
function playLine(x1,y1,x2,y2){
var slope=(y2-y1)/(x2-x1);
var distance=x2-x1;
if(distance>0){
for(var i=0;i<distance;i++){
var y=y1+i*slope;
var x=x1+i;
huadian(x,y);
}
} else if(distance<0){
for(var j=0;j>distance;j--){
var x=x1+j;
var y=y1+j*slope;
huadian(x,y);
}
}else {
temp=y2-y1;
if(temp>0){
for(var a=0;a<temp;a++){
x=x1;
y=y1+a;
huadian(x,y);
}
}else{
for(var b=0;b>temp;b--){
x=x1;
y=y1+temp;
huadian(x,y);
}
}
}
//画垂直线单独考虑
}
//画矩形
function ractanglePlay(x1,y1,high,width){
if(high>0 && width>0){
for(var i=0;i<width;i++){//画宽
x=x1+i;
y=y1;
huadian(x,y);
huadian(x,y+high);
}
for(var j=0;j<high;j++){//画高
x=x1;
y=y1+j;
huadian(x,y);
huadian(x+width,y);
}
}
}
cycle(500,300,300);//画圆
playLine(500,300,500,700); //画直线
playLine(100,300,1000,200);
playLine(1000,200,100,500);
playLine(500,300,100,500);
ractanglePlay(300,600,100,500);//画矩形
</script>
</body>
</html>
打开一个窗体
<script type="text/javascript">
function markmappoint(){
popwin=window.open('../query/mapmark/mapPointMarkFind.action','pointmarkMap','toolbar=no,location=no,directories=no,+status=no,menubar=no,scrollbars=no,+resizable=yes,width=1000,height=800,left=120,top=120');
}
</script>
分享到：
相关推荐
接着，我们来看一些流行的JavaScript绘图库，例如D3.js、Fabric.js和Chart.js。D3.js（Data-Driven Documents）是一款强大的数据可视化库，它能够绑定任意数据到DOM，并利用数据驱动转换来操作DOM。D3.js广泛用于...
在ArcGIS API 4.x for JavaScript中，开发者可以利用其丰富的功能来实现地图上的交互式绘制，例如手绘面和手绘线。这个压缩包文件很可能是包含了一系列示例代码或者教程，帮助用户理解如何利用API实现这些自定义功能...
对于复杂图形，可以利用SVG（Scalable Vector Graphics）与Canvas的结合，或者使用库如Fabric.js、Paper.js和Three.js等，它们提供更高级的功能和易用性。 在这个压缩包中的"JavaScript绘图.htm"文件，很可能是包含...
在"绘制等值线的js例程"中，核心库conrec.js是一个用于绘制等值线的JavaScript模块。ConREC（Contour RECtangles）算法是该库实现等值线绘图的方法，它通过对数据网格进行细分，找出特定值的边界，然后用矩形路径...
这款插件不仅限于JavaScript环境，还能无缝集成到ASP和.NET等服务器端框架中。这意味着开发者无需担心兼容性问题，可以在多种环境中自由使用。 **6. sources目录** 在压缩包中的"sources"文件夹，可能包含了插件的...
这时，我们通常会借助一些专门的JavaScript绘图库，如`Flot`。Flot是一个用纯JavaScript编写的图表库，特别适合用于Web应用中的数据可视化。文件"flot-0.3.zip"可能包含了早期版本的Flot库，它提供了线图、饼图、...
原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理，以下是详细解析： 1. Canvas API基础知识 - Canvas元素：HTML5新增的Canvas...
"lackgu3"和"triednfx"可能是作者或者项目的名字，而"JSCharts3_demo"和"flot"则可能是指两种不同的JavaScript绘图库。 首先，我们来讨论JavaScript的绘图API。在浏览器环境中，最常用的绘图API是HTML5的Canvas API...
5. **重绘循环**：使用`requestAnimationFrame()`来实现平滑的动画效果。在每一帧中，更新t值，计算新的位置，并在canvas上绘制。 实现步骤： 1. 初始化canvas并获取绘图上下文。 2. 定义贝塞尔曲线的起点、终点和...
在本文中，我们将深入探讨如何使用three.js库创建符号线动画。three.js是一个基于WebGL的JavaScript库，用于在浏览器中构建3D图形。通过利用这个库，开发者能够实现复杂的3D场景，包括动态和交互式的线动画效果。 ...
总的来说，JavaScript绘图库为我们提供了强大且灵活的工具，使我们能够在Web上创建引人入胜的视觉体验。无论是简单的线条还是复杂的形状，都能通过这些库轻松实现。学习并掌握这些库的使用，将极大地提升你的前端...
1. **画线(lineTo)**：绘制直线，从当前绘图位置到指定的终点。 2. **填充路径(fillPath)**：根据定义的路径进行颜色填充。 3. **描边路径(strokePath)**：沿着定义的路径绘制边框。 4. **绘制圆形(circle)**：在...
2. **使用绘图库**：JavaScript中有许多优秀的绘图库可以帮助我们轻松实现等值线绘制，如D3.js、Chart.js、Plotly.js等。这些库提供了丰富的API和配置选项，可以快速生成美观的等值线图。例如，D3.js库允许我们创建...
本文将深入探讨JavaScript的2D绘图功能，即JS2D函数集，帮助开发者掌握如何利用JavaScript在浏览器中绘制出丰富多彩的图形。 在HTML5中，Canvas元素的引入为JavaScript提供了一个强大的2D渲染上下文。通过...
“js曲线代码”通常指的是用于绘制曲线图的JavaScript库，如Chart.js、D3.js或者Highcharts等。例如，Chart.js是一个简单易用的库，可以轻松地在HTML5 canvas元素上绘制各种图表，包括曲线图。D3.js（Data-Driven ...
9. 性能优化：由于canvas的实时绘图可能对性能有一定要求，特别是在大尺寸画布上，因此需要考虑优化策略，如只重绘必要的部分，或者使用requestAnimationFrame来平滑动画效果。 10. 源码学习价值：对于初学者，...
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级编程语言，它在浏览器环境中可以直接操作DOM（Document Object Model）进行动态交互。在这个“js绘图，绘制各种图形，纯js”的主题中，我们将深入探讨如何利用...
本文将详细讲解如何使用JavaScript绘制各种基本形状，包括圆形、多边形、线和矩形。 首先，我们需要一个可以画图的环境。在网页中，最常用的工具是HTML5的Canvas API。通过在HTML中添加一个`<canvas>`元素，并在...
10. **性能优化**：由于实时绘图可能对性能造成影响，可以使用`requestAnimationFrame()`来平滑动画，并通过局部重绘而非全画布重绘来提高效率。 在"paintDraw-master"这个项目中，我们可以期待看到实现上述功能的...
`gdcla.js`和`javascript等值线`标签暗示了这是一个使用JavaScript编写的特定库或者函数，用于绘制等值线。可能`gdcla.js`是这个库的名字，它可能包含了一系列的函数和方法，专门用于解析和渲染等值线数据。而`...