首页 / JAVASCRIPT / JavaScript绘图代码_图象特效

JavaScript绘图代码_图象特效

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript绘图代码_图象特效，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1648字，纯文字阅读大概需要3分钟。

内容图文

<html> 
<head> 
<title>JavaScript绘图</title> 
<script language="JavaScript"> 
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")

var xo=0 
var yo=0 
var Ox = -1 
var Oy = -1

var rad = Math.PI/180 
var maxY = 400 
var color = "red"

function print(str) { 
document.write(str) 
}

function orgY(y) { 
return maxY-y 
} 
function outPlot(x,y,w,h) { 
print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>') 
}

function Plot(x,y) { 
outPlot(x,y,1,1) 
if(Ox>=0 || Oy>=0) { 
ShowLine(Ox,Oy,x-Ox,y-Oy) 
} 
Ox = x 
Oy = y 
}

function ShowLine(x,y,w,h) { 
if(w<0) { 
x += w 
w = Math.abs(w) 
} 
if(h<0) { 
y += h 
h = Math.abs(h) 
} 
if(w<1) w=1 
if(h<1) h=1 
outPlot(x,y,Math.round(w),Math.round(h)) 
}

function LineTo(x,y) { 
Line(xo,yo,x,y) 
}

function sign(n) { 
if(n>0) 
return 1 
if(n<0) 
return -1 
return n 
}

function Line(x1,y1,x2,y2) { 
x2 = Math.round(x2) 
y2 = Math.round(y2) 
xo = x2 
yo = y2 
y1 = orgY(y1) 
y2 = orgY(y2) 
var str = "" 
var i=0

var x = x1 
var y = y1 
dx = Math.abs(x2-x1) 
dy = Math.abs(y2-y1) 
s1 = sign(x2-x1) 
s2 = sign(y2-y1)

if(dx==0 || dy==0) { 
ShowLine(x1,y1,x2-x1,y2-y1) 
return 
}

if(dx>dy) { 
temp = dx 
dx = dy 
dy = temp 
key = 1 
}else 
key = 0 
e = 2*dy-dx

for(i=0;i<dx;i++) { 
px = 0 
py = 0 
Plot(x,y) 
while(e>=0) { 
if(key==1) { 
x += s1 
px += s1 
}else { 
y += s2 
py += s2 
} 
e = e-2*dx 
} 
if(key==1) 
y += s2 
else 
x += s1 
e = e+2*dy 
} 
}

function MoveTo(x,y) { 
Ox = Oy = -1 
xo = Math.round(x) 
yo = Math.round(y) 
}

// 圆 
function Cir(x,y,r) { 
MoveTo(x+r,y) 
for(i=0;i<=360;i+=5) { 
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y) 
} 
} 
// 弧形 
function Arc(x,y,r,a1,a2) { 
MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y) 
for(i=a1;i<=a2;i++) { 
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y) 
} 
} 
// 扇形 
function Pei(x,y,r,a1,a2) { 
MoveTo(x,y) 
for(var i=a1;i<=a2;i++) { 
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y) 
} 
LineTo(x,y) 
} 
// 弹出扇形 
function PopPei(x,y,r,a1,a2) { 
dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10 
dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10 
x += dx 
y += dy 
MoveTo(x,y) 
for(var i=a1;i<=a2;i++) { 
LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y) 
} 
LineTo(x,y) 
}

// 矩形 
function Rect(x,y,w,h) { 
MoveTo(x,y) 
LineTo(x+w,y) 
LineTo(x+w,y+h) 
LineTo(x,y+h) 
LineTo(x,y) 
}

// 准星 
function zhunxing(x,y) { 
var ox = xo 
var oy = yo 
var oColor = color 
color = "#000000" 
Line(x-5,y,x+6,y) 
Line(x,y-6,x,y+5) 
print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>') 
color = oColor 
xo = ox 
yo = oy 
} 
// 标注 
function biaozhuStr(x,y,s) { 
return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>' 
} 
function biaozhu(x,y,s,t) { 
var ox = xo 
var oy = yo 
var oColor = color 
point = "p01.gif" 
if(t==1) { 
print(biaozhuStr(x-5,y+6,"·"+s)) 
} 
if(t==2) { 
print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s)) 
} 
color = oColor 
xo = ox 
yo = oy 
} 
</ script> 
</head>

<body> 
<table border="0" width="100%"> 
<tr> 
<td width="100%" style="font-family: 方正舒体; font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td> 
</tr> 
<tr> 
<td width="100%" style="font-family: 幼圆; font-size: 12pt; color: #008000" class="t2"> 
如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td> 
</tr> 
</table>

<script> 
if(IE4) {

// 基本图形 
color = "maroon" 
Cir(50,40,20) 
Arc(100,40,20,60,120) 
Pei(150,60,40,240,300) 
Rect(200,20,40,40)

// 折线图 
color = "#FF0000" 
var jd = new Array( 
203,232,277,223,271,234,273,284,276,250,267,280 
) 
MoveTo(30,jd[0]-40) 
biaozhu(xo,yo,jd[0]) 
for(i=1;i<jd.length;i++) { 
LineTo(i*30+30,jd-40) 
biaozhu(xo,yo,jd,1) 
} 
color = "#C0C0C0" 
Line(30,140,i*30+30,140) 
Line(30,140,30,260)

// 饼图 
color = "#00FF00" 
var gc = new Array( 
150,120,200,180,180 
) 
var s = 0 
var m = 0 
var n = 0 
for(i=0;i<gc.length;i++) { 
s +=gc 
if(gc > m) { 
m = gc 
n = i 
} 
} 
var k = s/360 
var mm = 0 
var a =0 
for(i=0;i<gc.length;i++) { 
b = Math.round((gc+mm)/k) 
if(i==n) 
PopPei(600,150,100,a,b) 
else 
Pei(600,150,100,a,b) 
biaozhu(60,a+(b-a)/2,Math.round(gc/s*100)+"%",2) 
mm = mm+gc 
a = b 
}

// 十字标注 
MoveTo(280,20) 
zhunxing(xo,yo)

}else { 
document.write("<p> </p><table bgcolor=#FF0000><tr><td><font color=#FFFF00>对不起！您的浏览器不能支持该页的某些功能，请换用IE4.0以上版本的浏览器！谢谢！</font></td></tr></table>") 
} 
</ script>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的JavaScript绘图代码_图象特效全部内容，希望文章能够帮你解决JavaScript绘图代码_图象特效所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/308100.html

来源：【匿名】

【上一篇】javascriptXML数据显示为HTML一例_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript绘图代码_图象特效】教程文章相关的互联网学习教程文章

JavaScript数字精度上代码。

/**不能超过 9007199254740992 * floatObj 包含加减乘除四个方法，能确保浮点数运算不丢失精度 * * 我们知道计算机编程语言里浮点数计算会存在精度丢失问题（或称舍入误差），其根本原因是二进制和实现位数限制有些数无法有限表示 * 以下是十进制小数对应的二进制表示 * 0.1 >> 0.0001 1001 1001 1001…（1001无限循环） * 0.2 >> 0.0011 0011 0011 0011…（0011无限循环） * 计算机里每种数据类型的存储是一个有限宽度，...

sublime text 3 添加 javascript 代码片段 ( snippet )【代码】【图】

例如：新建console.log();的快捷键为 co环境：windows 7step1:Tools -> New Snippet 1<snippet> 2<content><![CDATA[consloe.log(${1:this});]]></content> 3 4<tabTrigger>co</tabTrigger> 5 6 7 8 ...

常用JavaScript代码库（又名：WFang.js）【代码】

1.根据公司项目封装ajax请求，结合layer框架一起使用/*提取接口公共部分*/var ApiConf = {server:"http://localhost:8080/Battery/", };/*** 调用接口方法* api:接口* callback:回调函数* info:参数* type:请求方式*/function WFang (api, callback, info , type){//加载动画 layer.load();//参数var data = info;var contentType = ‘application/x-www-form-urlencoded; charset=UTF-8‘;if(type == ‘post‘){contentType = ...

javascript 倒计时代码【代码】

javascript操作xml(增删改查)例子代码【代码】【图】

包括了stu.hta(是HTML应用程序); stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下:代码<html><head><title> 数据岛的显示　</title><style type="text/css">#findPanel{ position:absolute; width:220px; border:1px solid #666666;}#findPanelTitle{ height:10px; background-color:#336699; cursor:move;}#findPanelConte...

65行 JavaScript 代码实现 Flappy Bird 游戏

飞扬的小鸟（Flappy Bird）无疑是2014年全世界最受关注的一款游戏。这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发，形式简易但难度极高的休闲游戏，很容易让人上瘾。　　这里给大家分享一篇这款游戏的 HTML5 版制作教程，借助 Phaser 框架，只需65行 JavaScript 代码即可实现。简单的不能再简单！这才是境界，这才是高手！编程也是一样，几行代码能实现就别去写几十行，显摆什么！到头来只会发现越来越不会...

JDK8中Java调用Javascript脚本引擎动态定义与执行代码【代码】

import java.lang.*; import java.util.Arrays; import java.util.List;import javax.script.Invocable; import javax.script.ScriptEngine; import javax.script.ScriptEngineManager;public class ScriptEngineTest {public static void main(String[] args) throws Exception {ScriptEngineManager sem = new ScriptEngineManager();ScriptEngine engine = sem.getEngineByName("javascript"); //python or jython, <pre na...

Java8 Nashorn实现Java调用javascript代码【代码】

最近项目需要，利用java执行动态语言，首先想到的是支持js。1.从打印Hello World开始Java8 引入Nashorn实现javascript调用，比如使用java运行一段js实现“Hello World”打印：package com.iflytek.research.jsdemo;import javax.script.ScriptEngine; import javax.script.ScriptEngineManager; import javax.script.ScriptException;public class NashornTest {public static void main(String[] args) {// 加载nashorn执行引擎Sc...

JavaScript手动实现JSONP代码【代码】

浏览器的同源策略不允许我们直接通过ajax call别的域名上的url，但是script，img标签却米有这个限制，jsonp便是利用了这一点，通过在页面上生成一个src为我们所要调用url的script标签，能拿到服务器返回的结果，当然这个只支持get请求，同样，服务器端也要能够接受我们所传递的参数。下面是一个例子：<script>function removeScript(scriptId) {const script = document.getElementById(scriptId);document.getElementsByTagName(...

js 代码大全(各种方法、属性)

事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键event.keyCodeevent.shiftKeyevent.altKeyevent.ctrlKey事件返回值event.returnValue鼠标位置event.xevent.y窗体活动元素document.activeElement绑定事件document.captureEvents(Event.KEYDOWN);访问窗体元素document.all("txt").focus();document.all("txt").select();窗体命令docu...

JS判断客户端是手机还是PC的2个代码

Javascript 判断客户端是否为 PC 还是手持设备，有时候项目中需要用到，很方便的检测，源生的哦，方法一共有两种1、第一种：复制代码代码如下:function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo....

js代码块【代码】

1.内部变量覆盖外部变量内部变量覆盖了外部变量后，变量提升：即脚本开始运行时，变量temp已经存在了，但是没有值，所以会输出undefinedvar tmp = new Date();function f(){console.log(tmp);if (false){var tmp = "hello world";} }f() // undefined 2.用来计数的循环变量泄露为全局变量var s = ‘hello‘;for (var i = 0; i < s.length; i++){console.log(s[i]); }console.log(i); // 5 原文：http://www.cnblogs.com/susan-90/...

首页 / JAVASCRIPT / JavaScript绘图代码_图象特效

JavaScript绘图代码_图象特效

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript绘图代码_图象特效】教程文章相关的互联网学习教程文章

JavaScript数字精度上代码。

sublime text 3 添加 javascript 代码片段 ( snippet )【代码】【图】

常用JavaScript代码库（又名：WFang.js）【代码】

javascript 倒计时代码【代码】

javascript操作xml(增删改查)例子代码【代码】【图】

65行 JavaScript 代码实现 Flappy Bird 游戏

JDK8中Java调用Javascript脚本引擎动态定义与执行代码【代码】

Java8 Nashorn实现Java调用javascript代码【代码】

JavaScript手动实现JSONP代码【代码】

js 代码大全(各种方法、属性)

JS判断客户端是手机还是PC的2个代码

js代码块【代码】

一次js代码修改不更新问题的解决【图】

JavaScript进阶之路——认识和使用Promise，重构你的Js代码【代码】【图】

js代码从页面移植到文件中失效或js代码修改后不起作用的解决办法

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程