<!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=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
</head>
<body>
<span class="style1">
<script type="text/javascript">
function makedot(x,y){ //画点函数
var mydiv="<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>";
alert(mydiv);
document.write(mydiv)
}
/**
函数功能：根据给定的圆心和半径画圆
函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。
*/
function circle(x,y,r){ //(x,y)圆心，r半径
var dotx,doty,radio;
var Pi=Math.PI;
makedot(x,y);
for(var i=0;i<360;i+=0.5){
radio=i*Pi/180;
dotx=r*Math.cos(radio)+x;
doty=r*Math.sin(radio)+y
makedot(dotx,doty);
}
}
/**
函数功能：根据指点矩形左上角坐标及长宽绘制矩形。
函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标
*/
function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高
for(var i=0;i<w;i++){
makedot(x+i,y);
makedot(x+i,y+h);
}
for(var i=0;i<h;i++){
makedot(x,y+i);
makedot(x+w,y+i);
}
}
/**
函数功能：根据两点坐标画直线。
函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理
*/
function line(x1,y1,x2,y2){
var slope=(y2-y1)/(x2-x1); //斜率
var diff=x2-x1;
if(x1<x2){
for(var i=0;i<diff;i++){
makedot(x1+i,y1+slope*i);
}
}else if(x1>x2){
for(var i=0;i>diff;i--){
makedot(x1+i,y1+slope*i);
}
}else{ //画垂直线
var temp=y2-y1;
if(temp>0){
for(var i=0;i<temp;i++){
makedot(x1,y1+i);
}
}else{
for(var i=0;i>temp;i--){
makedot(x1,y1+i);
}
}
}
}
/**
函数功能：根据给定的三点坐标画三角形
函数思路：直接利用画线函数画三条线即可
*/
function triangle(x1,y1,x2,y2,x3,y3){
line(x1,y1,x2,y2);
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);
}
/**
函数功能：根据给定的一系列坐标点画多边形
函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线
*/
function polygon(){
var args=arguments.length;
if(args%2!=0) return -1;
var realargs=args/2; //坐标个数
for(var i=0;i<realargs-1;i++){
line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);
}
line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]);
}
circle(500,500,200);
rect(100,100,200,100);
triangle(200,200,100,400,300,400);
polygon(300,300,400,100,600,100,700,300,600,500,400,500);
</script>
</span>
</body>
</html>
分享到：
相关推荐
JavaScript画图库，如标题所言的"Javascript画图js包"，是一种允许开发者在网页上绘制图形的工具。在JavaScript的世界里，这样的库通常提供了一系列API，使得开发者无需深入理解底层图形渲染机制，就能方便地创建出...
支持javascript画图 详细请见：http://blog.chinaunix.net/u/21684/showart_453823.html
JavaScript画图还可以借助一些第三方库，如D3.js、Paper.js、Fabric.js等。这些库提供了更高级的功能和友好的API，帮助开发者更轻松地创建复杂的图表、交互式图形甚至游戏。例如，D3.js非常适合数据可视化，它能够将...
总的来说，WebVisio-js2.5是JavaScript画图领域的一个强大工具，它结合了直观的用户界面和丰富的功能，为创建和编辑流程图和拓扑图提供了高效、灵活的解决方案。无论是开发者还是非技术人员，都能通过这款工具轻松地...
【标签】"js画图" 指出了这个工具的核心功能，即使用JavaScript进行图形绘制。这可能包括但不限于直线、曲线、圆形、矩形、多边形等基本形状，以及更复杂的图表，如折线图、饼图、散点图等。此外，还可能涉及到图形...
在JavaScript的世界里，"js 画图 图画板"是一个常见的需求，特别是在创建交互式Web应用、在线教育平台或是设计工具中。JavaScript提供了一系列的库和API，使得开发者能够利用HTML5的Canvas元素来实现画图功能。让...
本文将深入探讨如何使用JavaScript进行画图，包括基础概念、常用库以及实例解析。 一、HTML5 Canvas API 在JavaScript中，HTML5的Canvas API是实现动态图形绘制的基础。它提供了一系列的方法和属性，允许开发者通过...
JavaScript画图类库提供了一种方便的方式来创建各种图表，包括折线图、饼状图和柱状图。这些图表可以帮助我们更好地理解数据，并将复杂的信息以直观的方式呈现出来。 1. **JavaScript 画图类库** JavaScript 画图...
在JavaScript画图的场景中，Ajax可以用来异步地获取数据，然后将数据转化为图形显示在Canvas上，实现动态的可视化效果。 "asp"和"c#"是两种服务器端编程语言，ASP.NET（通常与C#一起使用）提供了一个强大的框架来...
本项目提供了一个基于JavaScript（JS）的画图板实现，能够轻松转化为手写签字功能。这个JS画图板具有灵活性和易用性，可以根据不同的应用场景进行定制。 1. **基本原理** JS画图板的核心是利用HTML5的Canvas元素。...
js画图包这是个德国人写的很强大，可以实现一般图形的绘制，填充。里面的统计图例子中js文件引入的路径有问题应该改为<script type="text/javascript" src="wz_jsgraphics.js"></script>
总之，这个"难得的JavaScript画图源码"项目展示了如何利用JavaScript和VML技术实现动态工作流定义，它结合了菜单和树形控件，为用户提供了高效、美观的图形界面。对于学习JavaScript图形编程、工作流管理或者对旧版...
JavaScript（简称JS）是一种广泛用于Web开发的轻量级编程语言，它允许开发者在用户的浏览器端执行代码，为网页添加动态功能。在这个主题中，我们将深入探讨如何利用JS来实现画图，包括画线条、多边形、艺术字以及...
页面简洁美观，画笔，橡皮擦等功能。画笔可选大小、样色，并可导出图片。
"sketch.js 画图工具效果"便是一个专注于提供这种体验的JavaScript库。它允许用户在网页上直接进行绘画，提供了丰富的画图功能，让网页变得生动有趣。这款工具尤其在Chrome浏览器下表现出色，为开发者提供了一种简单...