一个用JS作的简单的画图程序,可改画线粗细和顡色,觉得挺有意思的,所以放上来,以供相互学习
2007-04-16 13:19
666 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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>
<script type="text/javascript">
var w=1;
var h=1;
var col='black';
var drawElement=0;//表示画哪种元素
var x1=0;
var y1=0;
var x2=0;
var y2=0;
var preStringLength=0;
var lastStringLength=0;
function add1()
{
w+=1;
h+=1;
}
function cut1()
{
if(w>1&&h>1)
{
w-=1;
h-=1;
}
}
function catchMouse()
{
var x=event.clientX-50;
var y=event.clientY-52;
makedot(x,y);
window.setTimeOut('catchMouse()',3);
}
function makedot(x,y){
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>");
}
function changeColor(a)
{
col=a.value;
}
function circle(xx1,yy1,xx2,yy2){
var x,y,r;
x=xx1;
y=yy1;
r=Math.sqrt(Math.abs(xx1-xx2)*Math.abs(xx1-xx2)+Math.abs(yy1-yy2)*Math.abs(yy1-yy2));
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(x1,y1,x2,y2){ //(x,y)Ͻ,w,h
var x,y,w,h;
x=x1;
y=y1;
w=Math.abs(x2-x1);
h=Math.abs(y2-y1);
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 draw(a)
{
drawElement=a;
}
function MouseD()
{
switch(drawElement)
{
case 0: document.onmousemove=catchMouse;break;
case 1:
case 2:
case 3:
case 4:
case 5:x1=event.clientX-50;y1=event.clientY-52;
default:break;
}
var sp=document.getElementById("sspp");
preStringLength=sp.innerHTML.length;
}
function MouseU()
{
x2=event.clientX-50;y2=event.clientY-52;
switch(drawElement)
{
case 0: document.onmousemove=null;break;
case 1: line(x1,y1,x2,y2);
break;
case 2: circle(x1,y1,x2,y2);break;
case 3: rect(x1,y1,x2,y2);break;
case 4:break;
case 5:break;
default:break;
}
var sp=document.getElementById("sspp");
lastStringLength=sp.innerHTML.length;
}
var spStr;
function drawCancel()
{
var sp=document.getElementById("sspp");
if(preStringLength<lastStringLength)
spStr=sp.innerHTML.substring(preStringLength+1,lastStringLength);
sp.innerHTML=sp.innerHTML.substring(0,preStringLength);
}
function drawRedo()
{
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd",spStr);
}
</script>
<body>
<span id="sspp" onMouseDown="MouseD()" onMouseUp="MouseU()" onmouseover="this.focus();" style="position:absolute;top:50px;left:50px;width:500px;height:500px;background-color:#eeeeee ">
</span>
<form action="" style="position:absolute;top:550px;left:50px; ">
<input type="button" onClick="drawCancel()" name="cancel" value="undo">
<input type="button" onClick="drawRedo()" name="cancel" value="redo">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<input type="button" onClick="draw(0)" name="point" value="点">
<input type="button" onClick="draw(1)" name="line" value="线">
<input type="button" onClick="draw(2)" name="circle" value="圆">
<input type="button" onClick="draw(3)" name="rect" value="方形">
<select id="col" onChange="changeColor(this)">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="red">red</option>
<option value="pink">pink</option>
</select>
</form>
</body>
</html>
<html>
<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>
<script type="text/javascript">
var w=1;
var h=1;
var col='black';
var drawElement=0;//表示画哪种元素
var x1=0;
var y1=0;
var x2=0;
var y2=0;
var preStringLength=0;
var lastStringLength=0;
function add1()
{
w+=1;
h+=1;
}
function cut1()
{
if(w>1&&h>1)
{
w-=1;
h-=1;
}
}
function catchMouse()
{
var x=event.clientX-50;
var y=event.clientY-52;
makedot(x,y);
window.setTimeOut('catchMouse()',3);
}
function makedot(x,y){
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>");
}
function changeColor(a)
{
col=a.value;
}
function circle(xx1,yy1,xx2,yy2){
var x,y,r;
x=xx1;
y=yy1;
r=Math.sqrt(Math.abs(xx1-xx2)*Math.abs(xx1-xx2)+Math.abs(yy1-yy2)*Math.abs(yy1-yy2));
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(x1,y1,x2,y2){ //(x,y)Ͻ,w,h
var x,y,w,h;
x=x1;
y=y1;
w=Math.abs(x2-x1);
h=Math.abs(y2-y1);
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 draw(a)
{
drawElement=a;
}
function MouseD()
{
switch(drawElement)
{
case 0: document.onmousemove=catchMouse;break;
case 1:
case 2:
case 3:
case 4:
case 5:x1=event.clientX-50;y1=event.clientY-52;
default:break;
}
var sp=document.getElementById("sspp");
preStringLength=sp.innerHTML.length;
}
function MouseU()
{
x2=event.clientX-50;y2=event.clientY-52;
switch(drawElement)
{
case 0: document.onmousemove=null;break;
case 1: line(x1,y1,x2,y2);
break;
case 2: circle(x1,y1,x2,y2);break;
case 3: rect(x1,y1,x2,y2);break;
case 4:break;
case 5:break;
default:break;
}
var sp=document.getElementById("sspp");
lastStringLength=sp.innerHTML.length;
}
var spStr;
function drawCancel()
{
var sp=document.getElementById("sspp");
if(preStringLength<lastStringLength)
spStr=sp.innerHTML.substring(preStringLength+1,lastStringLength);
sp.innerHTML=sp.innerHTML.substring(0,preStringLength);
}
function drawRedo()
{
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd",spStr);
}
</script>
<body>
<span id="sspp" onMouseDown="MouseD()" onMouseUp="MouseU()" onmouseover="this.focus();" style="position:absolute;top:50px;left:50px;width:500px;height:500px;background-color:#eeeeee ">
</span>
<form action="" style="position:absolute;top:550px;left:50px; ">
<input type="button" onClick="drawCancel()" name="cancel" value="undo">
<input type="button" onClick="drawRedo()" name="cancel" value="redo">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<input type="button" onClick="draw(0)" name="point" value="点">
<input type="button" onClick="draw(1)" name="line" value="线">
<input type="button" onClick="draw(2)" name="circle" value="圆">
<input type="button" onClick="draw(3)" name="rect" value="方形">
<select id="col" onChange="changeColor(this)">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="red">red</option>
<option value="pink">pink</option>
</select>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 今天一天都在忙论文的事情，所以今天没时间来学习c++，那就给大家带来一个简单小程序杨辉三角把
- WCF学习之旅 创建一个简单的WCF程序
- 微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例
- 用JS 写一个简单的程序，切换七彩盒子背景
- OpenCL 学习step by step (2) 一个简单的OpenCL的程序
- 基于node的websocket学习笔记二：一个简单的聊天室程序与优化方案
- 从头开始学习JSP（1）采用MyEclipse和Tomcat运行一个简单的.jsp程序
- 学习用node.js建立一个简单的web服务器
- 我从哪一个开源程序开始我的建站学习的，从最简单、最实用的一个开始
- OpenCV 2 学习笔记(3): 一个简单的opencv程序：在Console上显示图像
- Html5 Canvas+Javascript实现一个简单画图程序（二）
- 【java学习记录】3.采用面向对象的方法设计一个能对复数（Complex）进行加、减、乘法的简单运算的程序
- 自己写了一个简单的画图程序
- SDK一个简单的GDI程序(就是画图)
- 【opencv学习笔记五】一个简单程序：图像读取与显示
- 一个显示日期的简单小程序,主要是学习静态变量的用法
- Servlet学习笔记_03_使用servlet编写一个简单的helloworld程序
- 一个简单的javascript小程序学习javascript作用域和局部变量提前声明
- C++: wxWidgets (3) 一个简单的wxWidgets程序(学习笔记)
- 通过一个简单的例子学习编译器是如何执行程序的