html表格虚线.docx
《html表格虚线.docx》由会员分享，可在线阅读，更多相关《html表格虚线.docx（13页珍藏版）》请在冰豆网上搜索。
html表格虚线
竭诚为您提供优质文档/双击可除
html表格虚线
篇一：
canvas版实现画图、虚线、辅助线、线条颜色、线条宽度
canvas实现画图、虚线、辅助线、线条颜色、线条宽度，整合加强
版
使用canvas实现画图程序。
本次更新主要实现了一下功能：
虚线实线的选择、辅助线、线条颜色选择、线条宽度选择
进一步整理了下代码，发现了不少很有用的写法，具体看下面。
效果截图：
源代码：
①html代码
[html]viewplaincopy
1.
2.
3.
4.
5.
6.
7.canvas{
8.background-color:
rgb（247,247,247）;
9.margin-top:
10px;
10.}
11.
12.
13.
14.
15.线条类型
16.实线
17.虚线
18.
19.线条颜色
20.black
21.red
22.blue
23.
24.线条宽度
25.1
26.2
27.4
28.
29.网格线
30.坐标轴
31.辅助线
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43. 44.全局变量定义
45.函数：
窗口坐标转换为canvas坐标、保存\还原当前绘图表面数据、橡皮筋法相关函数、绘
制辅助线相关函数、初始化函数
46.事件处理：
鼠标down,move,up事件、按钮点击事件、单选框变化事件
47.-->
48.
49.
②绘制坐标轴与网格
[html]1.
2.
3.
4.
5.
6.
7.canvas{
8.
9.}
10.
11.
12.
13.
14.
15.网格线
16.坐标轴
17.
18.
19.
20.
21.
22.
23.
24.//Vars--------------------------------------------------------
25.varcanvas=document.getelementbyid（"canvas"）,
26.context=canvas.getcontext（"2d"）,
27.//正在绘制的绘图表面变量
28.drawingsurfaceimagedata,
29.//鼠标按下相关对象
30.mousedown={},
31.//橡皮筋矩形对象
32.rubberbandRect={},
33.//拖动标识变量
34.dragging=false;
35.//控制对象
36.vareraseallbutton=document.getelementbyid（"eraseallbutton"）,
37.axescheckbox=document.getelementbyid（"axescheckbox"）,
38.//检测axescheckbox是否被选中
39.haveaxes=axescheckbox.checked;
40.vargridcheckbox=document.getelementbyid（"gridcheckbox"）;
41.varhavegrid=gridcheckbox.checked;
42.//Functions---------------------------------------------------
43.//将窗口坐标转换为canvas坐标
44.//传入参数：
窗口坐标（x,y）
45.functionwindowtocanvas（x,y）{
46.//获取canvas元素的边距对象
47.varbbox=canvas.getboundingclientRect（）;
48.//返回一个坐标对象
49.//类似json的一种写法
50.return{
51.x:
x-bbox.left*（canvas.width/bbox.width）,
52.y:
y-bbox.top*（canvas.height/bbox.height）
53.};
54.}
55.//保存当前绘图表面数据
56.functionsavedrawingsurface（）{
57.//从上下文中获取绘图表面数据
58.drawingsurfaceimagedata=context.getimagedata（0,0,canvas.width,canvas.heigh
t）;
59.}
60.//还原当前绘图表面
61.functionrestoredrawingsurface（）{
62.//将绘图表面数据还原给上下文
63.context.putimagedata（drawingsurfaceimagedata,0,0）;
64.}
65.//橡皮筋相关函数
66.
67.//更新橡皮筋矩形+对角线
68.//传入参数：
坐标对象loc
69.functionupdateRubberband（loc）{
70.updateRubberbandRectangle（loc）;
71.drawRubberbandshape（loc）;
72.}
73.//更新橡皮筋矩形
74.//传入参数：
坐标对象loc
75.functionupdateRubberbandRectangle（loc）{
76.//获得矩形的宽
77.rubberbandRect.width=math.abs（loc.x-mousedown.x）;
78.//获得矩形的高
79.rubberbandRect.height=math.abs（loc.y-mousedown.y）;
80.//获得矩形顶点的位置（left,top）
81.//如果鼠标按下的点（起点）在当前点的的左侧
82.//这里画一下图就懂了
83.if（loc.x>mousedown.x）{
84.rubberbandRect.left=mousedown.x;
85.}else{
86.rubberbandRect.left=loc.x;
87.}
88.if（loc.y>mousedown.y）{
89.rubberbandRect.top=mousedown.y;
90.}else{
91.rubberbandRect.top=loc.y;
92.}
93.}
94.//绘制橡皮筋矩形的对角线
95.//传入参数：
坐标对象loc
96.functiondrawRubberbandshape（loc）{
97.//alert（"draw"）;
98.context.beginpath（）;
99.context.moveto（mousedown.x,mousedown.y）;
100.context.lineto（loc.x,loc.y）;
101.context.stroke（）;
102.}
103.//事件处理-----------------------------------------------------104.canvas.onmousedown=function（e）{
105.varloc=windowtocanvas（e.clientx,e.clienty）;
106.e.preventdefault（）;
107.savedrawingsurface（）;
108.mousedown.x=loc.x;
109.mousedown.y=loc.y;
110.dragging=true;
111.}
112.
113.canvas.onmousemove=function（e）{
114.varloc;
115.if（dragging）{
116.e.preventdefault（）;
117.loc=windowtocanvas（e.clientx,e.clienty）;
篇二：
ys-《网页制作》复习题（判断题）
1、html标记符的属性一般不区分大小写。
（√）
2、网站形式上就是一个页面集合的文件夹。
（√）
3、将网页上传到internet时通常采用Ftp方式。
（√）
4、所有的html标记符都包括开始标记符和结束标记符。
（x）
5、用h1标记符修饰的文字通常比用h6标记符修饰的要小。
（x）
6、b标记符表示用粗体显示所包括的文字。
（√）
7、giF格式的图象最多可以显示256种颜色。
（√）
8、html表格在默认情况下有边框。
（x）
9、创建图象映射时，理论上可以指定任何形状作为热点。
（√）
10、指定滚动字幕时，不允许其中嵌入图象。
（x）
11、将制作好的网页上传到网上的过程，即是网页的发布过程。
（√）
12、在dreamweaver中，图像超级链接分为图像链接和图像映射两种。
（√）
13、在dreamweaver的表单项中，提交按钮的作用是把包含该按钮的表单的所有内容发送到表单指定的地址。
（√）
14、在dreamweaver中可以对本地站点进行打开、编辑操作，不能进行删除和复制等操作。
（x）
15、Fireworks可以直接将弹出的菜单所需要的html代码和javascript代码导入到html文件中。
（√）
16、在Fireworks中，曲线调整可以调整高光、暗调和中间调以及0～100范围内的任意点的色调分布。
（x）
17、在Fireworks中，按住【shift】键的同时单击对话框中的“放大/缩小”按钮，可以缩小浏览图像。
（x）
18、在Flashmx中导入一张位图图像，可以用部分选取工具对其进行任意修改。
（x）
19、在Flash中，两个关键帧之间的普通帧在创建关键帧的同时可由系统自动生成。
（√）
20、在Flash中，if条件语句在动画中的作用是：
如果if的条件不成立，则执行if和endif之间的语句。
（x）
21、对浏览器标题栏上显示的文本，能够使用标记控制其字体。
（x）
22、在html文件中不必包含头部。
（√）
23、dreamweaver中不能在一个表格的单元格中插入层。
（x）
24、设置链接目标的打开方式时，_blank表示在一个新的视窗中打开目标网页。
（√）
25、dreamweaver中插入一个表单后，会出现一个红色虚线框，它表示表单对象，但该虚线不会出现在浏览器中。
（√）
26、为密码型文本框输入数据时，回显字符全是星号。
（√）
27、如果一个网页能够接收浏览者的输入信息并做后端处理，则该网页称为动态网页。
（√）
28、dreamweaver可以编辑页面。
（√）
29、如果一个图像尺寸超出层的尺寸，将该图像作为层的背景时，默认情况下，dreamweaver会按图像尺寸扩大层的尺寸。
（x）
30、在设置iis时，虚拟目录是必须的。
（x）
31、超链接有源端点和目标端点两种情况的链接形式。
超链接中有链接的一端称为链接的目标端点，跳转到的页面称为链接的源端点。
（x）
32、在dreamweaver中，删除模板的操作实际上就是从本地站点的templates文件夹中删除相应的模板文件。
（√）
33、密码输入框在外观上与单行文本框相同，只是在显示时有所不同，在密码输入框中输入的信息以“*”号显示。
（√）
34、在dreamweaver中，在命名模板可编辑区域时，不能使用双引号、单引号、小于号、大于号等特殊字符，必须用时使用转意符。
（√）
35、Fireworks中能够存储撤销操作的次数范围为0～200。
（x）
36、在Fireworks中，文本既可以环绕于封闭路径，也可以环绕于未封闭路径。
（√）
37、在Fireworks中，导出图像的组合键为【ctrl+alt+R】。
（x）
38、Flash的工具箱由绘图工具区、查看工具区、颜色工具区和选项工具区四个部分组成。
（√）
39、在Flash中，库分为动画文件本身的库和系统自带的库两种，系统自带的库可以对其进行编辑，而动画文件本身的库不可编辑。
（x）
40、逐帧动画是指先把动画中的分解动作一帧一帧地制作出来，然后再把它们连续播放。
（√）
41、在html表格中，td和th标记符都可以用来包括单元格内容。
（√）
42、在html表格中，表格的行数等于tR标记符的个数。
（√）
43、在html表格中，表格的列数等于任意一行中th与td的个数。
（x）
44、在html表格中，表格的列数等于任意一行中th与td的colspan属性的和。
（x）
45、在html表格中，表格的列数等于第一行中th与td的colspan属性的和。
（√）
46、在html表格中，在tR、td或th标记符中使用align属性可以控制单元格内容的垂直对齐。
（x）
47、html表格内容的垂直对齐方式默认为垂直居中。
（√）
48、框架是一种能在同一个浏览器窗口中显示多个网页的技术。
（√）
49、要想在一个网页中嵌套另外一个网页，一般可以使用页内框架。
（√）
50、只有在框架结构的网页中，才能将a标记符的target属性指定为_blank，从而使超链接目标文件在一个新的浏览器窗口中打开。
（x）
篇三：
canvas版画图、虚线、辅助线、线条颜色、线条宽度,整合加强版
canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版使用canvas实现画图程序。
本次更新主要实现了一下功能：
虚线实线的选择、辅助线、线条颜色选择、线条宽度选择
进一步整理了下代码，发现了不少很有用的写法，具体看下面。
效果截图：
源代码：
①html代码
[html]
1.
2.
3.
4.
5.
6.
7.canvas{
8.background-color:
rgb（247,247,247）;
9.margin-top:
10px;
10.}
11.
12.
13.
14.
15.线条类型
16.实线
17.虚线
18.
19.线条颜色
20.black
21.red
22.blue
23.
24.线条宽度
25.1
26.2
27.4
28.
29.网格线
30.坐标轴
31.辅助线
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43. 44.全局变量定义
45.函数：
窗口坐标转换为canvas坐标、保存\还原当前绘图表面数据、橡皮筋法相关函数、绘制辅助线相关函数、初始化函数
46.事件处理：
鼠标down,move,up事件、按钮点击事件、单选框变化事件
47.-->
48.
49.
②绘制坐标轴与网格
[html]viewplaincopy1.
2.
3.
4.
5.
6.
7.canvas{
8.
9.}
10.
11.
12.
13.
14.
15.网格线
16.坐标轴
17.
18.
19.
20.
21.
22.
23.
24.//Vars--------------------------------------------------------
25.varcanvas=document.getelementbyid（"canvas"）,
26.context=canvas.getcontext（"2d"）,
27.//正在绘制的绘图表面变量
28.drawingsurfaceimagedata,
29.//鼠标按下相关对象
30.mousedown={},
31.//橡皮筋矩形对象
32.rubberbandRect={},
33.//拖动标识变量
34.dragging=false;
35.//控制对象
36.vareraseallbutton=document.getelementbyid（"eraseallbutton"）,
37.axescheckbox=document.getelementbyid（"axescheckbox"）,
38.//检测axescheckbox是否被选中
39.haveaxes=axescheckbox.checked;
40.vargridcheckbox=document.getelementbyid（"gri（html表格虚线）dcheckbox"）;
41.varhavegrid=gridcheckbox.checked;
42.//Functions---------------------------------------------------
43.//将窗口坐标转换为canvas坐标
44.//传入参数：
窗口坐标（x,y）
45.functionwindowtocanvas（x,y）{
46.//获取canvas元素的边距对象
47.varbbox=canvas.getboundingclientRect（）;
48.//返回一个坐标对象
49.//类似json的一种写法
50.return{
51.x:
x-bbox.left*（canvas.width/bbox.width）,
52.y:
y-bbox.top*（canvas.height/bbox.height）
53.};
54.}
55.//保存当前绘图表面数据
56.functionsavedrawingsurface（）{
57.//从上下文中获取绘图表面数据
58.drawingsurfaceimagedata=context.getimagedata（0,0,canvas.width,canvas.heigh
t）;
59.}
60.//还原当前绘图表面
61.functionrestoredrawingsurface（）{
62.//将绘图表面数据还原给上下文
63.context.putimagedata（drawingsurfaceimagedata,0,0）;
64.}
65.//橡皮筋相关函数
66.
67.//更新橡皮筋矩形+对角线
68.//传入参数：
坐标对象loc
69.functionupdateRubberband（loc）{
70.updateRubberbandRectangle（loc）;
71.drawRubberbandshape（loc）;
72.}
73.//更新橡皮筋矩形
74.//传入参数：
坐标对象loc
75.functionupdateRubberbandRectangle（loc）{
76.//获得矩形的宽
77.rubberbandRect.width=math.abs（loc.x-mousedown.x）;
78.//获得矩形的高
79.rubberbandRect.height=math.abs（loc.y-mousedown.y）;
80.//获得矩形顶点的位置（left,top）
81.//如果鼠标按下的点（起点）在当前点的的左侧
82.//这里画一下图就懂了
83.if（loc.x>mousedown.x）{
84.rubberbandRect.left=mousedown.x;
85.}else{
86.rubberbandRect.left=loc.x;
87.}
88.if（loc.y>mousedown.y）{
89.rubberbandRect.top=mousedown.y;
90.}else{
91.rubberbandRect.top=loc.y;
92.}
93.}
94.//绘制橡皮筋矩形的对角线
95.//传入参数：
坐标对象loc
96.functiondrawRubberbandshape（loc）{
97.//alert（"draw"）;
98.context.beginpath（）;
99.context.moveto（mousedown.x,mousedown.y）;
100.context.lineto（loc.x,loc.y）;
101.context.stroke（）;
102.}
103.//事件处理-----------------------------------------------------104.canvas.onmousedown=function（e）{
105.varloc=windowtocanvas（e.clientx,e.clienty）;
106.e.preventdefault（）;
107.savedrawingsurface（）;
108.mousedown.x=loc.x;
109.mousedown.y=loc.y;
110.dragging=true;
111.}
112.
113.canvas.onmousemove=function（e）{
114.varloc;
115.if（dragging）{
116.e.preventdefault（）;
117.loc=windowtocanvas（e.clientx,e.clienty）;
118.restoredrawingsurface（）;
升级会员 