社区
JavaScript
帖子详情
请问是否可以再html用语句点到点画线?
xiwanghope
2003-06-23 04:52:14
请问可以实现吗?
如果可以最好能给个函数!谢谢
...全文
117
5
打赏
收藏
请问是否可以再html用语句点到点画线?
请问可以实现吗? 如果可以最好能给个函数!谢谢
复制链接
扫一扫
分享
举报
写回复
配置赞助广告
用AI写文章
5 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
xiwanghope
2003-06-23
打赏
举报
回复
so cool~~
结账,thanks
emu
2003-06-23
打赏
举报
回复
<BODY>
<div id=div1></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
div1.innerHTML = drawLine(100,100,500,300,"red");
document.writeln("<style>");
document.writeln(".emuW{position:absolute;font-size:1px;width:1}");
document.writeln(".emuH{position:absolute;font-size:1px;height:1}");
document.writeln(".emuWH{position:absolute;font-size:1px;width:1;height:1}");
document.writeln("A{text-decoration:none;color:#FF66FF}");
document.writeln("</style>");
function drawLine(x0,y0,x1,y1,color){
x0 = Math.round(x0);
x1 = Math.round(x1);
y0 = Math.round(y0);
y1 = Math.round(y1);
var rs = "";
if (y0 == y1){ //»ºáÏß
if (x0>x1){var t=x0;x0=x1;x1=t}
rs = "<img border=0 class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>";
}
else if (x0 == x1){ //»ÊúÏß
if (y0>y1){var t=y0;y0=y1;y1=t}
rs = "<img border=0 class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
}
else{
var lx = x1-x0;
var ly = y1-y0;
if (Math.abs(lx)>Math.abs(ly)){
if (ly<0){
var t=x0;x0=x1;x1=t;
t=y0;y0=y1;y1=t;
lx = -lx;
ly = -ly;
}
var dx = lx/ly;
rs = new Array(ly);
for (var i=0;i<ly;i++){
var left,width;
if (dx>0){
left = Math.round(i*dx);
width = Math.round((i+1)*dx)-left;
left += x0;
if (width+left>x1) width = x1-left;
}else{
left = Math.round((i+1)*dx);
width = Math.round((i)*dx)-left;
left += x0;
if (left<x1) {
width = width+left-x1;
left=x1;
}
}
rs[i] = "<img border=0 class=emuH style='top:"+(y0+i)+";left:"+left+";width:"+width+";background-color:"+color+"'/>";
}
}else{
if (lx<0){
var t=x0;x0=x1;x1=t;
t=y0;y0=y1;y1=t;
lx = -lx;
ly = -ly;
}
var dy = ly/lx;
rs = new Array(lx);
for (var i=0;i<lx;i++){
var top,height;
if (dy>0){
top = Math.round(i*dy);
height = Math.round((i+1)*dy)-top;
top += y0;
if (height+top>y1) height = y1-top;
}else{
top = Math.round((i+1)*dy);
height = Math.round((i)*dy)-top;
top += y0;
if (top<y1) {
height = height+top-y1;
top=y1;
}
}
rs[i] = "<img border=0 class=emuW style='top:"+top+";left:"+(x0+i)+";height:"+height+";background-color:"+color+"'/>";
}
}
rs = rs.join("");
}
return rs
}
//-->
</SCRIPT>
</BODY>
呵呵,晕了没?
div1.innerHTML = drawLine(100,100,500,300,"red");这一句可以改坐标和颜色。
xiwanghope
2003-06-23
打赏
举报
回复
那请问有程序吗?
希望能给我一个!
neowing@163.com
zgczsf
2003-06-23
打赏
举报
回复
好像得用Script来实现
zgczsf
2003-06-23
打赏
举报
回复
好像得用Script来实现
【
html
5每日练习】
html
5 canvas
画线
现在网络最火的是
html
5,没有之一,虽然正式版还没有出,但咱们可以期待着在未来几年,
html
5会霸占了互联网,所以毫无疑问得加入到
html
5的学习之中,谁学得快,谁就有可能把握住新时代的潮流,今天开始最简单的
html
5的学习,
画线
,
画线
是动画的基础,可能你会说花点才是基础,的确如此,canvas上的画就是一个个像素组成的。下面是今天写的一个程序,简单易懂 window.onload
html
5
画线
,
html
5画圆,
html
5渐变颜色,
html
5画图
1.
画线
html
lang="en"> head> meta charset="UTF-8"> title>
画线
title> head> body> canvas id="test3" width="100px" height="40px">canvas> script type="text/javascript"> var c=document.g
HTml
5 Canvas 整理笔记之
画线
1.
画线
1.1在画之前先“配置好画布”(以后不再提及)实例介绍//先设置一点canvas的style里面有属性使其有边框(好观察),居中(display:block,要先把canvas设置成块级元素,margin的设置中央才有效)
Canvas鼠标
画线
Canvas鼠标
画线
HTML
canvas系列-
画线
模糊问题(8)
HTML
canvas系列-
画线
模糊问题(8)1、devicePixelRatio2、scale方法3、示例 1、devicePixelRatio devicePixelRatio 返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。这个属性使得浏览器确定使用多少个屏幕的实际像素来绘制单个 CSS 像素。 canvas使用 window.devicePixelRatio 以确定应该添加多少额外的像素得到清晰的图像。 2、scale方法 canvas缩放方法。 3、示例 <!DOCTYPE h
JavaScript
87,984
社区成员
224,681
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章