`
thunderbow
  • 浏览: 154501 次
  • 性别: Icon_minigender_1
  • 来自: beijing
社区版块
存档分类
最新评论

用JavaScript绘图 ——JS2D函数集

阅读更多
<SCRIPT language=JavaScript type=text/JavaScript>
	var isdrag = false;
	function img_zoom(e, o) //图片鼠标滚轮缩放

	{
		var zoom = parseInt(o.style.zoom, 10) || 100;
		zoom += event.wheelDelta / 12;
		if (zoom > 0)
			o.style.zoom = zoom + '%';
		return false;
	}
	function mouseover() {
		div1.border = "1";
		div1.style.cursor = "nw-resize";
	}
	function mouseout() {
		div1.border = "0";
	}
	function mousemove() {
		if (isdrag) {
			div1.style.width = event.clientX;
			//div1.style.height=event.clientY;
		}
	}
	function mousedown() {
		div1.setCapture();
		isdrag = true;
		div1.onmousemove = mousemove;
	}
	function mouseup() {
		div1.releaseCapture();
		isdrag = false;
		//event.returnValue=false;
	}
</SCRIPT>
<IMG onmouseover="mouseover()" onmouseout="mouseout()"
  onmouseup="mouseup()" onmousedown="mousedown()" id="div1"
  onmousewheel="return img_zoom(event,this)" alt="鼠标的滚轮控制图片自动缩放"
  src="http://www.java2000.net/images/company/www.java2000.net.gif"
  onload="javascript:if(this.width>screen.width-500)this.width=screen.width-500">

 

分享到:
评论

相关推荐

    js2plot:一个小型库和工具,可通过平移和缩放功能在画布元素中绘制2D数学JavaScript函数

    小型库,用于通过平移和缩放在画布元素中绘制2D数学JavaScript函数。 作为简单功能绘图仪实用程序的一部分编写的( ) 由Stephan Soller提供 ,根据MIT许可证发布。 特征 您可以直接在JavaScript中编写函数。 对于...

    Cocos2D-X游戏开发技术精解

    第1章 Cocos2D-X引擎的介绍 1 1.1 何为游戏引擎 1 1.1.1 游戏的核心—引擎 1 1.1.2 引擎的特点 2 1.1.3 知名的引擎介绍 4 1.1.4 引擎的分类 5 1.2 Cocos2D-X引擎的来历 8 1.3 引擎的版本 9 1.4 下载与安装 10 1.5 ...

    贪吃蛇 函数封装经典案例.docx

    JavaScript 使用 id 来寻找 canvas 元素: var c=document.getElementById("myCanvas");然后,创建 context 对象: var cxt=c.getContext("2d");getContext("2d") 对象是内建的 HTML5 对象, 拥有多种绘制路径、矩形、...

    WebGL编程指南压缩包

    JavaScript 程序(HelloCanvas.js) 17 用示例程序做实验 22 绘制一个点(版本1) 22 HelloPoint1.html 24 HelloPoint1.js 24 着色器是什么? 25 使用着色器的WebGL 程序的结构 27 初始化着色器 29 顶点着色...

    WebGL编程指南

    10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序:清空绘图区 16 HTML 文件(Hel loCanvas.html) 16 JavaScript 程序(HelloCanvas.js) 17 用示例程序做实验 22 绘制一个点(版本1) 22 ...

    webgl编程指南及源码1/2

    JavaScript 程序(HelloCanvas.js) 17 用示例程序做实验 22 绘制一个点(版本1) 22 HelloPoint1.html 24 HelloPoint1.js 24 着色器是什么? 25 使用着色器的WebGL 程序的结构 27 初始化着色器 29 顶点着色...

    webgl编程指南及源码2/2

    JavaScript 程序(HelloCanvas.js) 17 用示例程序做实验 22 绘制一个点(版本1) 22 HelloPoint1.html 24 HelloPoint1.js 24 着色器是什么? 25 使用着色器的WebGL 程序的结构 27 初始化着色器 29 顶点着色...

    canvas-multiline-text:模块导出单个函数,该函数允许HTML Canvas上的文本根据画布大小分成多行

    该函数还返回绘图文本使用的字体大小。 drawMultilineText ( context , text , options ) ;例子const canvas = new Canvas ( 500 , 300 ) ;const drawMultilineText = require ( 'canvas-multiline-text' ) ;const ...

    精通Qt4编程(第二版)源代码

    \16.1 3D绘图——使用OpenGL 406 \16.1.1 创建OpenGL窗口 406 \16.1.2 着色 410 \16.1.3 3D和旋转 411 \16.1.4 纹理贴图 414 \16.2 SVG 417 \16.2.1 绘制SVG图形 418 \16.2.2 生成SVG文件 419 \16.3 小结 ...

    精通qt4编程(源代码)

    \16.1 3D绘图——使用OpenGL 406 \16.1.1 创建OpenGL窗口 406 \16.1.2 着色 410 \16.1.3 3D和旋转 411 \16.1.4 纹理贴图 414 \16.2 SVG 417 \16.2.1 绘制SVG图形 418 \16.2.2 生成SVG文件 419 \16.3 小结 420 \第17...

    基站

    涉及的主题:•我们的开发环境•2D绘图•变量,对象和交互•条件语句•基本循环和数组•使用for循环遍历•函数•高级循环和数组•扩展对象•构造函数 编程入门II-JavaScript,P5.js 通过学习该模块,我们通过项目...

    HTML5 CANVAS游戏开发实战(PDF和源代码)

    4.4.4 使用canvas的原始绘图函数进行绘图 / 93 4.4.5 使用lsprite对象进行绘图 / 94 4.4.6 使用lgraphics对象绘制图片 / 95 4.5 文本 / 101 4.5.1 文本属性 / 101 4.5.2 输入框 / 102 4.6 事件 / 103 4.6.1 ...

    canvas:Canvas是一个基于OpenGL或使用与HTML5 canvas API非常相似的软件渲染的Go图形库

    该库旨在以与Javascript API相似的方式在每个函数上接受很多不同的参数。 尽管Javascript API使用了所有绘制调用都可以访问的上下文,但是所有绘制调用都直接位于画布类型上。 另一个区别是,这里使用了setter而...

Global site tag (gtag.js) - Google Analytics