`
thunderbow
  • 浏览: 156745 次
  • 性别: 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">

 

分享到:
评论

相关推荐

    javascript经典特效---JavaScript绘图.rar

    JavaScript绘图技术是Web开发中的一个重要领域,它允许开发者在网页上动态创建和修改图形,为用户带来丰富的视觉体验。JavaScript绘图的核心是利用HTML5的Canvas元素和相关的API,这些API提供了绘制线条、形状、图像...

    javascript图形API库jsDraw2D

    1. **绘图功能**:jsDraw2D提供了多种基本图形绘制函数,如直线、曲线、矩形、圆形、多边形等,可以方便地创建和编辑这些图形。 2. **事件处理**:通过监听用户的鼠标和触摸事件,jsDraw2D可以实现图形的交互性,...

    使用纯JavaScript进行简单的三角函数可视化

    本教程将探讨如何使用纯JavaScript实现三角函数的可视化,这有助于理解这些函数的行为,并为学习者提供一个直观的交互式平台。 首先,我们需要创建HTML页面作为可视化的基础。这个页面将包含一个`&lt;canvas&gt;`元素,它...

    基于JavaScript和PHP的支持更换 Live2D 模型的 Typecho 插件源码

    4. Canvas绘图:Live2D模型通常在Canvas上绘制,JavaScript需要处理模型的动画帧更新和用户交互。 其次,PHP是服务器端的脚本语言,它与JavaScript配合处理后端逻辑。在本项目中,PHP可能涉及以下知识点: 1. 数据...

    JavaScript绘图,在页面上绘制圆状图形,供源码下载

    这篇博文“JavaScript绘图,在页面上绘制圆状图形”提供了一个源码示例,我们可以从中学习到如何利用JavaScript和HTML5 Canvas API来创建动态的、交互式的圆形。 首先,我们需要在HTML文件中引入一个canvas元素。在...

    API绘图函数使用一例.rar

    API绘图函数则是用于在屏幕上绘制图形的特定函数集,它们可以帮助开发者创建自定义的可视化元素,如图表、图像或其他复杂图形。本示例将深入探讨如何利用API绘图函数实现图形绘制。 首先,API绘图函数通常包括但不...

    JavaScript画基本图形函数

    HTML5引入了Canvas元素,它是一个可编程的2D渲染上下文,允许我们用JavaScript直接在网页上绘制图形。Canvas API提供了丰富的绘图命令,可以实现复杂的图形绘制和动画效果。 #### 2.1 创建Canvas元素 ```html ...

    网页模板——javascript制作的图形验证码特效.zip

    在JavaScript中,可以使用`Math.random()`函数生成随机数,并结合字符集(如ASCII码)转换成相应的字母或数字。通过设定字符串长度,可以生成指定长度的验证码。 2. **图形绘制**: 要创建图形验证码,需要在HTML...

    原生JS使用Canvas实现拖拽式绘图功能

    原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理,以下是详细解析: 1. Canvas API基础知识 - Canvas元素:HTML5新增的Canvas...

    一个JavaScript绘图和画画App

    JavaScript绘图和画画App是一种基于Web的交互式应用程序,它允许用户通过浏览器进行绘画和创意表达。这样的应用通常使用HTML5的Canvas元素结合JavaScript技术来实现。Canvas是HTML5的一个重要组成部分,它提供了一个...

    Cocos2d-X游戏【泰然网《跑酷》】JS到C++移植完整版

    5. **渲染和图形**:Cocos2d-X提供了基于OpenGL的渲染系统,我们需将JS中的绘图命令转换为C++的绘制调用,如drawRect、drawPolygon等。 6. **音频处理**:音乐和音效的播放也是游戏的重要部分。Cocos2d-X的...

    Javascript绘图代码

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它可以直接在浏览器中执行,无需预编译。...现在,你已经掌握了JavaScript绘图的基础,接下来就可以尝试结合自己的创意,创造出独一无二的视觉效果了。

    安卓Android源码——三国杀版连连看(使用html5的canvas特性,纯javascript开发).zip

    Canvas的绘图函数,如`fillRect()`、`beginPath()`、`stroke()`等,会被用来更新游戏画面,如显示棋盘、标记选中的元素、动画效果等。 在HTML5的环境中,JavaScript是实现动态交互的关键。在这个连连看游戏中,...

    ArcGIS JS API创建自定义图层实现在2D地图中渲染水波纹扩散效果.zip

    在本文中,我们将深入探讨如何使用ArcGIS JavaScript API(JS API)来创建一个自定义图层,以便在2D地图上实现水波纹扩散的动态效果。ArcGIS JS API是Esri公司提供的一个强大工具,它允许开发者在Web浏览器中构建...

    JavaScript书籍(JavaScript模式.pdf+JavaScript高效图形编程.pdf)

    1. **Canvas API**:Canvas是HTML5中的一个绘图元素,通过JavaScript可以绘制2D图形,书中有详细的教学如何使用Canvas API进行图形绘制。 2. **WebGL**:WebGL允许在浏览器中进行3D图形渲染,书可能介绍了如何使用...

    JavaScript 动态三角函数实例详解

    虽然提供的代码片段没有包含使用三角函数的部分,但通常情况下,三角函数会被用在`requestAnimationFrame`的回调函数中,计算图形的位置、大小等属性,然后使用`ctx.fillRect()`, `ctx.strokeRect()`, `ctx.arc()`,...

    基于canvas 2D实现微信小程序自定义组件-环形进度条

    Canvas 2D 提供了一套丰富的绘图接口,让我们能够动态绘制复杂的图形,如环形进度条。 首先,我们需要了解canvas的基本使用。在HTML中,`&lt;canvas&gt;`元素是一个画布,我们可以使用JavaScript的`...

    ribbonjs使用HTML5canvas生成色带JS库

    通过查看`ribbon.js-master`压缩包中的源码,我们可以看到如何组织代码结构,如何利用Canvas API进行绘制,以及如何用JavaScript实现动画效果。这对于提升JavaScript编程技能和掌握Canvas应用技巧都非常有帮助。 ...

Global site tag (gtag.js) - Google Analytics