`
taote
  • 浏览: 33907 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS Canvas实现2D之点线篇

阅读更多
概要:HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新的发展方向。在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证,视频和音频标签,网页元素的拖拽,离线存储,工作线程等等。当然,其中一个最令人激动的新特性就是新的标签类型 Canvas,开发人员可以通过该标签,在网页上直接用脚本进行绘图,产生各种 2D 渲染的效果。所以有人预言,HTML5 将是 Flash 和 Silverlight 的“杀手”。从 Firefox 1.5 开始就已经支持 Canvas,Safari 也是很早就开始支持 Canvas。新的浏览器比如 Chrome 也是从一开始就支持。但遗憾的是,到目前为止,IE 一直不支持该标准。
HTML 5 引入了新的的网页元素:<canvas>。Canvas 是一片空白的绘图区域,网页开发者可以利用 JavaScript 在该区域中自由地进行 2D 绘图。常见的在canvas中显示自己定义格式的字体,点、线、等具体2D、3D模型,图片的效果处理等等,具体实现可见canvas相关文档。
文归正题,前段时间在我的项目中也需要js在页面中做出一些2D图像效果,我查看了很多关于canvas的文档,但是由于IE不支持统统都得放弃。关于这个功能很是可惜,但是由于我们公司项目基本基于IE实现,难道IE就不支持js 2D作图,答案显然是否定的,通过对网友一段精彩的js函数的修改,实现了我要的效果,在页面上进行2点画线,实现工程图2点测距的功能,这里我对其思路方法进行简单总结:
A.创造canvas,可以指定一页面对象为canvas,并定义其大小样式:
/**
* 用指定的id, 长和宽构造一个画板
*
* @param id html元素的id
* @param w 指定的画板宽度
* @param h 指定的画板高度
*/
var Canvas = function(id, w, h) {
// 只想Canvas实例,以修正this指针的引用错误.
var self = this;
// 缓冲器
var cache = [];
// 画板绑定到的html元素的引用
var canvas = document.getElementById(id);
// 画板底色, 默认为浅灰色
var bgColor = "lightgray";
// 笔刷的颜色, 默认为黑色
var fgColor = "black";
// 原点坐标, 初始为(0, 0)
var oX = 0, oY = 0;
// 是否允许点画到画板边界以外
var allowOutside = false;
// 渲染html元素
canvas.onselectstart = function() {return false;}
canvas.style.overflow = "hidden";
canvas.style.background = "lightblue";
canvas.style.width = (w ? w : 400) + "px";
canvas.style.height = (h ? h : 400) + "px";
        ……
}

B. 定义好canvas,然后就是作图,画布上所有的对象的基础对象就是点,所有的对象都是由点所组成的,完成了点的处理,就成功了一半:定义点,画点然后画线:
       /*
* 在给定的坐标出画点
*
* @param x x坐标
* @param y y坐标
*/
this.point = function(x, y) {
var pos = self.pos();
var size = self.size();
x = pos.x + oX + x;
y = pos.y + oY + y;

// 如果不允许在边界外显示点,则不讲该点推入缓存
if (!allowOutside
&& !((x >= pos.x && x <= pos.x + size.width)
&& (y >= pos.y && y <= pos.y + size.height)))
return;
cache.push("<span  name= 'pointxxx' style='width:1px;height:1px;position:absolute;left:" + x +"px;top:" + y + "px;background-color:" + fgColor + ";font-size:0px;z-index:999;'></span>");
}
        /**
* 数值微分法画直线
*
* @param x0 起点x坐标
* @param y0 起点y坐标
* @param x1 终点x坐标
* @param y1 终点y坐标
*/
function line_DDA(x0, y0, x1, y1) {
var px = x0, py = y0;
var dx = x1 - x0;
var dy = y1 - y0;
var incX = 0, incY = 0;
var epsl = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);
incX = dx / epsl;
incY = dy / epsl;
for (var i = 0; i < epsl; i++) {
self.point(parseInt(px + 0.5), parseInt(py + 0.5));
px += incX;
py += incY;
}
}
/**
* 用给定的起点和终点坐标画直线
*
* @param x0 起点x坐标
* @param y0 起点y坐标
* @param x1 终点x坐标
* @param y1 终点y坐标
*/
this.line = function(x0, y0, x1, y1) {
line_DDA(x0, y0, x1, y1);
}
/**
         * 清空画板
*/
this.clear = function() {
cache = [];
canvas.innerHTML = "";
}
/**
* 清空直线
*/
this.clearPoint = function() {
//alert(canvas.innerHTML)
var p2 = getElementsByName1("span","pointxxx");
 
//alert(p2.length)
for(var i=0;i<p2.length;i++)
canvas.removeChild(p2[i]);
}
其实点画好了,是他的平面对象都是根据数学模型及循环知识由点拼出,这里就不一一列举。这里我就将我运用以上js做出的2点画线效果:
<div id='canvas' onclick = 'doPoint()'> //指定div对象为画布对象,并赋函数
<script>
function doPoint(){
points = points +1;
if(points%2!=0){
gc.clearPoint(); //清空点痕
x0 = GetPositionX();
y0 = GetPositionY();
gc.point(x0,y0);//画点
gc.paint();
}else if(points%2==0){
x1 = GetPositionX();
y1 = GetPositionY();
gc.point(x1,y1);
gc.paint();
gc.fgColor("red");//设置点色
gc.line(x0,y0,x1,y1);
gc.paint();//画布实现
alert(GetDistance(x0,x1,y0,y1));
}

}
</script>
初始化:
function Onload() {
gc = GCanvas("canvas", 600, 600);
gc.bgColor("black");
gc.paint();
}
看效果:
见附件
分享到:
评论

相关推荐

    旋转的点线图形canvas特效.zip

    - `js`: 这个目录可能包含了一个或多个JavaScript文件,其中包含了Canvas特效的主要逻辑,如初始化Canvas、设置动画循环、绘制和旋转点线图形的函数等。 5. **实现细节** - `initCanvas()`: 初始化Canvas,设置其...

    H5 Canvas点线图形旋转特效

    本主题聚焦于"H5 Canvas点线图形旋转特效",这是一种利用Canvas 2D渲染上下文来实现的动画效果,通过绘制点和线,并让它们以特定方式旋转,创造出引人入目的动态图形。 首先,要理解Canvas的基本绘图操作。Canvas ...

    HTML5 canvas点点相交线代码.zip

    在JavaScript中,我们通过`document.createElement('canvas')`创建canvas对象,并使用`getContext('2d')`获取其2D渲染上下文,这为我们提供了绘制路径、形状、文本、图像等的接口。 在HTML5 canvas中,线条是由两个...

    纯JS实现的鼠标移动特效

    在JavaScript的世界里,动态视觉效果是提升用户体验的重要手段之一。今天我们要探讨的是一种纯JS实现的鼠标移动特效,尤其是一种类似烟花绽放的效果。这个特效能够跟随鼠标的移动轨迹,为网页增添活力和趣味性。 ...

    Three.js点线几何空间图形特效

    Three.js是一个基于WebGL的JavaScript库,它为开发人员提供了一个简单易用的接口来创建3D内容,可以在现代浏览器上运行,无需插件支持。 首先,我们要理解Three.js中的基本概念。Three.js的核心对象是场景(Scene),...

    H5 Canvas点线图形旋转特效特效代码

    "H5 Canvas点线图形旋转特效特效代码"是一个利用Canvas API实现的交互式图形动画示例,它展示了如何用点和线构建出复杂的图形,并通过旋转效果创造出视觉上的动态变化。 首先,我们需要理解Canvas的基本使用方法。...

    点和线连接Canvas动画特效代码

    接下来,我们需要获取Canvas元素,并创建一个2D渲染上下文,用于绘图操作: ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ``` 现在,我们可以开始...

    asp.net监测CPU占用率-点线图展示

    总结,这个ASP.NET项目实现了通过系统性能计数器获取CPU占用率,并以点线图的形式展示。它涉及到ASP.NET页面生命周期的理解,C#代码编写,性能计数器的使用,以及前端数据可视化的实现。通过这个小Demo,我们可以...

    HTML5 canvas点点相交线特效代码

    至于“line.js”文件,这很可能是实现这个特效的JavaScript代码,里面包含了具体的canvas操作和点线相交的逻辑。 要深入理解并实现这个特效,你需要熟悉HTML5 canvas的基本绘图方法,如`context.beginPath()`、`...

    点和线连接Canvas动画

    Canvas是HTML5中用于绘制2D图形的标签,允许开发者通过JavaScript进行实时绘图,从而实现各种复杂的动画和视觉特效。 Canvas动画的基本原理是利用JavaScript来控制Canvas画布上的像素,绘制和更新图像。在这个特定...

    原生js验证码

    本示例探讨的是如何使用原生JavaScript实现一个带有彩色点线干扰的验证码功能,这通常涉及到图像处理、随机数生成以及前端交互等多个知识点。 首先,验证码的核心是生成一串随机字符,这些字符通常是字母、数字的...

    第十课 图形的绘制 如何使用自定义画笔 2.rar

    这些图形通常通过编程语言中的图形库或API来实现,例如Java的`Graphics2D`,Python的`PIL`,或JavaScript的`Canvas API`。 2. **自定义画笔**:自定义画笔允许开发者根据需求调整线条的宽度、颜色、样式(实线、...

    HTML5不规则的圆点连线动画特效

    Canvas是HTML5中用于绘制2D图形的API,通过JavaScript进行编程控制,可以实现动态的、交互式的视觉效果。在“HTML5不规则的圆点连线动画特效”中,开发者可能利用Canvas的drawCircle()方法来绘制一系列随机分布的...

    简单绘图控制

    1. **图形API和库**:在计算机科学中,图形用户界面(GUI)和2D/3D图形的创建往往依赖于特定的API(应用程序接口)或库,如Python的matplotlib和PIL,JavaScript的Canvas API,或者是专业图形库如OpenGL和DirectX。...

    设置线条样式的参数

    在JavaScript的Canvas API中,可以使用`strokeStyle`属性设置线条颜色;在CSS中,使用`stroke-color`属性即可。 4. **端点样式(Cap Style)和连接样式(Join Style)**:端点样式指线条结束处的形状,如圆形、方形...

Global site tag (gtag.js) - Google Analytics