html5 获取项目路径
2019-04-09 08:59:56 yuzehome 阅读数 163

需求:

1.需要在页面中,实现单击按钮,弹出选择目录对话框,选择目录后,在页面中显示路径

 

环境:

Chrome V42以上,此版本已经禁止了NPAPI,因此通过插件形式,无法调用NativeAPI

注:HTML5只提供上传文件的对话框,不提供保存文件和选择目录的对话框

解决方法:

1.Chrome提供Native Message支持Chrome扩展和Native APP通过标准输入输出通讯

2.Native可以是MFC\Win32\.Net程序,Windows API SHBrowseForFolder 提供了选择目录功能

3.SHBrowseForFolder参数BROWSEINFO提供了父窗口句柄设置,窗口一旦形成父子窗口的关系,弹出的模态对话框就像是Chrome弹出的一样

4.Native获取到选择文件的路径后,通过Native Message发送至Chrome扩展的background脚本

5.Background将消息转发至content 脚本 

6.content脚本通过window.postMessage将消息发送至页面脚本 或直接在Content脚本中修改DOM

7.通过以上流程可以实现,在Chrome中选择目录

参考链接:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

2016-12-06 08:46:50 fqlin 阅读数 31

路径

HTML5 Canvas的基本图形都是以路径为基础的。通常使用Context对象的moveTo()、lineTo()、rect()、arc()等方法先在画布中描出图形的路径点,然后使用fill()或者stroke()方法依照路径点来填充图形或者绘制线条。

通常,在开始描绘路径之前需要调用Context对象的beginPath()方法,其作用是清除之前的路径并提醒Context开始绘制一条新的 路径,否则当调用stroke()方法的时候会绘制之前所有的路径,影响绘制效果,同时也因为重复多次操作而影响网页性能。另外,调用Context对象 的closePath()方法可以显式地关闭当前路径,不过不会清除路径。

以下是一些描绘路径的方法的原型:

void moveTo(x, y);

用于显式地指定路径的起点。默认状态下,第一条路径的起点是画布的(0, 0)点,之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。

void lineTo(x, y);

用于描绘一条从起点从指定位置的直线路径,描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。

void rect(left, top,width, height);

用于描绘一个已知左上角顶点位置以及宽和高的矩形,描绘完成后Context的绘制起点会移动到该矩形的左上角顶点。参数表示矩形左上角顶点的x、y坐标以及矩形的宽和高。

void arcTo(x1, y1, x2, y2,radius);

用于描绘一个与两条线段相切的圆弧,两条线段分别以当前Context绘制起点和(x2, y2)点为起点,都以(x1, y1)点为终点,圆弧的半径为radius。描绘完成后绘制起点会移动到以(x2, y2)为起点的线段与圆弧的切点。

void arc(x, y, radius,startAngle, endAngle, anticlockwise);

用于描绘一个以(x, y)点为圆心,radius为半径,startAngle为起始弧度,endAngle为终止弧度的圆弧。anticlockwise为布尔型的参 数,true表示逆时针,false表示顺时针。参数中的两个弧度以0表示0°,位置在3点钟方向;Math.PI值表示180°,位置在9点钟方向。

void quadraticCurveTo(cpx,cpy, x, y);

用于描绘以当前Context绘制起点为起点,(cpx,cpy)点为控制点,(x, y)点为终点的二次样条曲线路径。

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

用于描绘以当前Context绘制起点为起点,(cpx1,cpy1)点和(cpx2, cpy2)点为两个控制点,(x, y)点为终点的贝塞尔曲线路径。

 

路径描绘完成后,需要调用Context对象的fill()和stroke()方法来填充路径和绘制路径线条,或者调用clip()方法来剪辑Canvas区域。以上三个方法的原型如下:

void stroke();

用于按照已有的路径绘制线条。

void fill();

用于使用当前的填充风格来填充路径的区域。

void clip();

用于按照已有的路线在画布中设置剪辑区域。调用clip()方法之后,图形绘制代码只对剪辑区域有效而不再影响区域外的画布。如调用之前没有描绘路径(即默认状态下),则得到的剪辑区域为整个Canvas区域。

 

此外,Context对象还提供了相应的属性来调整线条及填充风格,如下所示:

strokeStyle

线条的颜色,默认为”#000000”,其值可以设置为CSS颜色值、渐变对象或者模式对象。

fillStyle

填充的颜色,默认为”#000000”,与strokeStyle一样,值也可以设置为CSS颜色值、渐变对象或者模式对象。

lineWidth

线条的宽度,单位是像素(px),默认为1.0。

lineCap

线条的端点样式,有butt(无)、round(圆头)、square(方头)三种类型可供选择,默认为butt。

lineJoin

线条的转折处样式,有round(圆角)、bevel(平角)、miter(尖角)三种;类型可供选择,默认为miter。

miterLimit

线条尖角折角的锐利程序,默认为10。

 

 

 

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600"height="400">   
         <p>Your browserdoes not support the canvas element!</p>   
</canvas>   
    
<script type="text/javascript">   
window.onload = function() {   
         var canvas =document.getElementById("canvas");   
         var context2D =canvas.getContext("2d");   
           
         //绘制相交的线段   
         context2D.beginPath();   
         context2D.moveTo(50,50);    //指定一条线段的起点
         context2D.lineTo(100,100);     //指定一条线段的终点
         context2D.moveTo(200,50);   
         context2D.lineTo(100,100);   
         context2D.stroke();   
         
         //绘制与这两条线段相切的红色圆弧   
         context2D.beginPath();    //清除之前的路径并提醒Context开始绘制一条新的路径,否则当调用stroke()方法的时候会绘制之前所有的路径
         context2D.strokeStyle= "#ff0000";   
         context2D.moveTo(50,50);   
         context2D.arcTo(100,100, 200, 50, 100);  //很明显,这里的参数不好设置…… 
         context2D.stroke();   
         //绘制一个蓝色的圆   
         context2D.beginPath();   
         context2D.strokeStyle= "#ff0000";   
         context2D.arc(300,250, 100, 0, Math.PI*2 , false);    //注意这里的参数是弧度制,而不是角度制
         context2D.stroke();   
         //将上面的圆填充为灰色   
         context2D.fillStyle ="#a3a3a3";   
         context2D.fill();   
         //在上面的圆中剪辑一个圆形方形区域   
         context2D.beginPath();   
         context2D.rect(250,200, 100, 100);   
         context2D.clip();    //这个方法确实很土,需要借助于默认的矩形或者制定的矩形,而不能自定义矩形
         //在剪辑区域中填充一个大于该区域尺寸的矩形   
         context2D.fillStyle ="yellow";   
         context2D.fillRect(0,0, 400, 400);   
}   
</script>    
</body>
</html>

2018-03-12 17:25:18 weixin_39597587 阅读数 163

一.超链接的属性 

<a>标签是文本超链接标签,它的私有属性有:

属性名称

描述

href

指向元素链接的资源

hreflang

指向元素链接资源所使用的语言

media

说明链接资源是哪种设备

rel

说明元素与链接资源的关系类型

target

指明打开链接资源的浏览器形式

type

说明所链接的资源(比如text/html)

target属性的参数:默认为_self

参数名称

描述

_blank

在新窗口打开链接

_self

在自身窗口打开链接

_parent

在父窗框组(franmeset)打开链接

_top

在顶层窗口打开链接

用法:

<body>
a标签 <a href="http://www.baidu.com" target="_blank">html5</a>
<!--表示以打开新窗口的形式,打开超链接-->
</body>

二.相对路径和绝对路径  

相对路径:就是相对于当前位置开始的。

a标签 <a href="index2.html" target="_self">html5</a>

绝对路径:就是直接从根开始的完整路径。

a标签 <a href="file:///E:/webstromWork/html5/index2.html" target="_self">html5</a>

./表示当前目录  ../表示父亲目录   ../../表示爷爷目录

三.锚点设置

什么是锚点?锚点就像是一个定位器。当你点击a标签,就会自动跳转至页面指定位置。

而超链接的锚点功能,是通过属性name和id实现锚点定位。这里注意一下:name只作用于<a>标签,而id作用于所有。

用法:

<body>
<a href="#text1">text1</a>
<a href="#text2">text2</a>
<a name="text1"></a>
<!--<a id="text1"></a>-->
<p>text1text1text1text1</p>
<p>text1text1text1text1</p>
<p>text1text1text1text1</p>
<a name="text2"></a>
<!--<a id="text2"></a>-->
<p>text2text2text2text2</p>
<p>text2text2text2text2</p>
<p>text2text2text2text2</p>
</body>





2011-03-17 17:12:51 wjlgryx 阅读数 16
在 Canvas 中,所有基本图形都是以路径为基础的,也就是说,我们在调用 2dContext 的 lineTo、rect 等方法时,其实就是往已经的 context 路径集合中再添加一些路径点,在最后使用 fill 或 stroke 方法进行绘制时,都是依据这些路径点来进行填充或画线。
在每次开始绘制路径前,都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来绘制的路径会与之前绘制的路径叠加,在填充或画边框时就会出现问题。在绘制完成路径后,可以直接使用 context.closePath() 方法来关闭路径,或者手动关闭路径。另外,如果在填充时路径没有关闭,那么 Context 会自动调用 closePath 方法将路径关闭。
基本路径方法
1. beginPath, closePath
这两个方法在前面已经介绍过,分别用来通知 Context 开始一个新的路径和关闭当前的路径。
在 Canvas 中使用路径时,应该要保持一个良好的习惯,每次开始绘制路径前都要调用一次 beginPath 方法,否则画出来的效果难看不说,还会严重影响性能。
在下面这张图中,左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径,而后面的图形则就只在绘制所有图形前调用了一次 beginPath 来清除路径,因此,虽然这里是使用的边框色是 #666,但是右边的图形颜色比左边的深一些,因为每次使用 stroke 绘制边框时,会把之前的路径再次绘制一遍,叠加起来颜色就比原来深一些。

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#666";
function useBeginPath() {
for (var i = 0; i < 5; ++i) {
ctx.beginPath();
ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
ctx.stroke();
}
}
function notUseBeginPath() {
ctx.beginPath();
for (var i = 0; i < 5; ++i) {
ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
ctx.stroke();
}
}
useBeginPath();
notUseBeginPath();
</script>

提示:您可以先修改部分代码再运行

在 Context 中路径数较少时,如果不考虑显示效果,性能上还可以接受,但是如果 Context 中的路径数很多时,在开始绘制新路径前不使用 beginPath 的话,因为每次绘制都要将之前的路径重新绘制一遍,这时性能会以指数下降。
因此,除非有特殊需要,每次开始绘制路径前都要调用 beginPath 来开始新路径。
2. 移动与直线 moveTo, lineTo, rect

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(110,110);
ctx.lineTo(10, 110);
ctx.lineTo(10, 10);
ctx.stroke();
ctx.beginPath();
ctx.rect(120, 10, 100, 100);
ctx.stroke();
</script>

提示:您可以先修改部分代码再运行

void moveTo(in float x, in float y);
在 Canvas 中绘制路径,一般是不需要指定起点的,默认的起点就是上一次绘制路径的终点,因此,如果需要指定起点的话,就需要使用 moveTo 方法来指定要移动到的位置。
void lineTo(in float x, in float y);
lineTo 方法则是绘制一条直接路径到指定的位置。在调用完 lineTo 方法后,Context 内部的绘制起点会移动到直线的终点。
void rect(in float x, in float y, in float w, in float h);
rect 方法用来绘制一个矩形路径,通过参数指定左上角位置以及宽和高。在调用 rect 后,Context 的绘制起点会移动到 rect 绘制的矩形的左上角。
rect 方法与后面要介绍的 arc 方法与其他路径方法有一点不同,它们是使用参数指定起点的,而不是使用 Context 内部维护的起点。
3. 曲线 arcTo, arc, quadraticCurveTo, bezierCurveTo
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
按照 WHATWG 文档的说明,这个方法是画一个与两条射线相切的的圆弧,两条射线其中一条为穿过 Context 绘制起点,终点为 (x1, y1),另外一条为穿过 (x2, y2),终点为 (x1, y1),这条圆弧为最小的与这两条射线相切的圆弧。在调用完 arcTo 方法后,将 圆弧与 射线 (x1, y1)-(x2, y2) 的切点添加到当前路径中,做为下次绘制的起点。
在测试中发现,Firefox 和 Opera 目前对这个方法的支持并不好,只有 Chrome 和 Safari 4 能绘制出正确的路径。

图中的的两条灰色直线是偏移 4 个像素后的两条射线所在的位置。
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.translate(200, 200);
ctx.moveTo(10, 10);
ctx.arcTo(110, 60, 10, 110, 30);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#999";
ctx.moveTo(10, 6);
ctx.lineTo(114, 60);
ctx.lineTo(10, 114);
ctx.stroke();
</script>

提示:您可以先修改部分代码再运行

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
arc 方法用来绘制一段圆弧路径,通过圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小,这个方法也不依赖于 Context 维护的绘制起点。而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定,如果为 true 就是逆时针,false 则为顺时针。
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
quadraticCurveTo 方法用来绘制二次样条曲线路径,参数中 cpx 与 cpy 指定控制点的位置,x 和 y 指定终点的位置,起点则是由 Context 维护的绘制起点。
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
bezierCurveTo 方法用来绘制贝塞尔曲线路径,它与 quadraticCurveTo 相似,不过贝塞尔曲线有两个控制点,因此参数中的 cp1x, cp1y, cp2x, cp2y 用来指定两个控制点的位置,而 x 和 y 指定绺的位置。

<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(10, 10);
ctx.beginPath();
ctx.arc(50, 50, 50, 0, Math.PI, true);
ctx.stroke();
// quadraticCurveTo
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.moveTo(110, 50);
ctx.quadraticCurveTo(160, 0, 210, 50);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(110, 50);
ctx.lineTo(160, 0);
ctx.lineTo(210, 50);
ctx.stroke();
// bezierCurveTo
ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.moveTo(220, 50);
ctx.bezierCurveTo(250, 0, 280, 10, 320, 50);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(220, 50);
ctx.lineTo(250, 0);
ctx.lineTo(280, 10);
ctx.lineTo(320, 50);
ctx.stroke();
</script>

提示:您可以先修改部分代码再运行

4. fill, stroke, clip
fill 与 stroke 这两个方法很好理解,分别用来填充路径与绘制路径线条。
clip 方法用来给 Canvas 设置一个剪辑区域,在调用 clip 方法之后的代码只对这个设定的剪辑区域有效,不会影响其他地方,这个方法在要进行局部更新时很有用。默认情况下,剪辑区域是一个左上角在 (0, 0),宽和高分别等于 Canvas 元素的宽和高的矩形。

在画这个图时,虽然两次都是使用 fillRect(0, 0, 100, 100) 填充了一个 100x100 大小矩形,但是显示的结果却是第二次填充的只是中间的一小块,这是因为在两次填充之间使用 clip 方法设定了剪辑区域,这样第二次填充时只会影响到所设定的中间那一小部分区域。
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(10, 10);
// fill a green rectangle
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 100, 100);
// set the clipping region
ctx.beginPath();
ctx.rect(30, 30, 40, 40);
ctx.clip();
ctx.stroke();
// fill a yellow rectangle
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 100, 100);
</script>

提示:您可以先修改部分代码再运行

5. clearRect, fillRect, strokeRect
这三个方法并不是路径方法,而是用来直接处理 Canvas 上的内容,相当于 Canvas 的背景,调用这三个方法也不会影响 Context 绘图的起点。
要清除 Canvas 上的所有内容时,可以直接调用 context.clearRect(0, 0, width, height) 来直接清除,而不需要使用路径方法绘制一个与 Canvas 同等大小的矩形路径再使用 fill 方法去清除。
2015-09-22 10:59:22 jieerkitty 阅读数 215

绘制一系列的圆



function draw(id){

             var canvas =  document.getElementById(id);

              if( canvas = = null ) {

                      return false;

             }

             var  context = canvas.getContext( "2d");

             context.fillStyle = "#eeeeef";

             context.fillRec(0,0,600,700);

             for(var i=0;i<=10;i++){

                    context.beginPath();

                     context.arc(i*25, i*25, i*10, 0, Math.PI*2, true);

                    context.closePath();

                    context.fillStyle = "rgba(255, 0,0 , 0.25)" ;

                    context.fill(); 

             }


}


<body   onload=" draw( ' canvas' )">

      <canvas id="canvas" width="600px"  height="700px"></canvas>

</body>

html5中的路径问题

阅读数 428

按照惯例,不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说,beginPath函数最大的用处是canvas需要据此来计算图形的内部和外部的范围,以便完成后续的描边和填充。路径会跟踪当前坐标,默认值是原点。canvas本身也跟踪当前坐标,不过可能通过绘制代码来修改。每一个canva

博文 来自: hyb0852

HTML5画布路径教程

阅读数 576

创建一个路径与HTML5画布,我们可以连接多个子路径。终点的每一个新的subpath成为新的上下文。我们可以用画线(),arcTo(),quadraticCurveTo(),和bezierCurveTo()方法来构建每个subpath占我们的路径。我们还可以使用beginPath()方法每次我们想开始画一个新的路径。HTML5画布路径图body{

博文 来自: u012292563

html5超链接和路径a的属性

阅读数 2972

锚点设置想要结果代码:超链接和路径//百度index2//绝对路径一般移动后不可使用///以下是相对路径index2//条件是文件必须都在一个磁盘或目录下index2//子目录index2//孙目录index2//父目录index2//爷目录///以下是锚点链接第一章第二章第

博文 来自: a716121

HTML5超链接和路径(20160803-0003)

阅读数 515

HTML5超链接和路径,示例

博文 来自: u010494204

html5 第六章 svg 路径

阅读数 2793

文章内容来源于http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Paths#Notational_Shortcuts_for_a_Path第3章中描述的所有基本形状是真正简写形式为更普遍的的元素。你是很好的建议,使用这些快捷键,它们有助于使你的SVG更具可读性和更有条理。的元素较为一般,它勾勒了一系列连接线,圆弧和曲线通过

博文 来自: stary1
没有更多推荐了,返回首页