html连线画代码（html链接怎么做）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享html连线画代码的知识，其中也会对html链接怎么做进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、java、js怎么实现连线题功能
- 2、如何用html5 canvas画出一颗爱心
- 3、求教高手，HTML连线题怎样制作？
- 4、任意给出两个点的x,y轴坐标 用html5的canvas 画出带箭头弧形连线
java、js怎么实现连线题功能
你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整
代码如下
%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title测试/title
script src=""/script
script
function drawThis(obj){
if(obj.style.border=="1px solid red"){
obj.style.border="1px solid blue";
}else{
obj.style.border="1px solid red";
}
var div = document.getElementsByTagName("div");
var leftX = "";
var leftY = "";
var rightX="";
var rightY="";
for ( var i = 0; i div.length; i++) {
if(div[i].style.border=="1px solid blue"){
if(div[i].className=="left"){
leftX = $(div[i]).position().left+70;
leftY = $(div[i]).position().top+35;
}else if(div[i].className=="right"){
rightX = $(div[i]).position().left;
rightY = $(div[i]).position().top+35;
}
}
}
if(rightX!=""leftX!=""){
for ( var i = 0; i (rightX-leftX)/2; i++) {
var newDiv = document.createElement("div");
var y = (rightY-leftY)/((rightX-leftX)/2);
$(newDiv).css("background-color", "red");
$(newDiv).css("z-index","2");
$(newDiv).css("left",(leftX+i*4));
$(newDiv).css("top",(leftY+i*y));
$(newDiv).css("height",y+"px");
$(newDiv).css("width","4px");
$(newDiv).css("position","absolute");
$("#detail").append(newDiv);
}
}
}
/script
/head
body
div align="center" style="margin-top: 20px;margin-left: 30%" id="detail"
div class="left" style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-right: 200px" onclick="drawThis(this)"a/div
div style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-left: 200px"1/div
br /
br /
br /
br /
br /
div style="cursor:pointer; border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-right: 200px"b/div
div style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-left: 200px"2/div
br /
br /
br /
br /
br /
div style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-right: 200px"c/div
div class="right" style="cursor:pointer;border: 1px solid red;text-align: center;float:left;width: 70px;height: 70px;font-size: 40px;line-height: 70px;margin-left: 200px" onclick="drawThis(this)"3/div
/div
/body
/html
如何用html5 canvas画出一颗爱心
!DOCTYPE html
html
head
titleDraw Heart/title
style type="text/css"
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
background-color:white;
}
#canvasZone {
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
#myCanvas {
height:100%;
display: block;
/*background-color:aqua;*/
}
/style
script type="text/javascript"
var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。
var r = 4;
var radian;//弧度
var i;
var radianDecrement;//弧度增量
var time = 10;//每个点之间的时间间隔
var intervalId;
var num = 360;//分割为 360 个点
var startRadian = Math.PI;
var ctx;
window.onload = function () {
startAnimation();
}
function startAnimation() {
ctx = document.getElementById("myCanvas").getContext("2d");
//让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。
WINDOW_HEIGHT=document.documentElement.clientHeight-20;
WINDOW_WIDTH=document.documentElement.clientWidth-20;
ctx.width = WINDOW_WIDTH;
ctx.heigh = WINDOW_HEIGHT;
drawHeart();
}
function drawHeart() {
ctx.strokeStyle = "red";
ctx.lineWidth = 1;//设置线的宽度
radian = startRadian;//弧度设为初始弧度
radianDecrement = Math.PI / num * 2;
ctx.moveTo(getX(radian), getY(radian));//移动到初始点
i = 0;
intervalId = setInterval("printHeart()", time);
}
//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
function printHeart() {
radian += radianDecrement;
ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线
//arr.push("X:" + getX(radian) + "br/Y:" + getY(radian) + "br/");
i++;
ctx.stroke();//画线
if (i = num) {
clearInterval(intervalId);
//document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。
}
}
function getX(t) {//由弧度得到 X 坐标
return 100 + r * (16 * Math.pow(Math.sin(t), 3));
}
function getY(t) {//由弧度得到 Y 坐标
return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
}
/script
/head
body
div id="canvasZone"
canvas id="myCanvas"/canvas
/div
div id="bs"
/div
/body
/html
求教高手，HTML连线题怎样制作？
用canvas实现，可以实现。划线的位置 你自己调调。还有对象创建
canvas = $('#myCanvas')[0];
ctx = canvas.getContext('2d');
// 画出左边到右边的连接
linkWith: function(ctxx, leftIndex, rightIndex) {
console.log("link "+leftIndex+" with "+rightIndex);
ctxx.beginPath();
ctxx.moveTo(0.5,(2*leftIndex-1)*cellHeight + 0.5);
ctxx.lineWidth=1;
ctxx.lineTo(canvasWidth +0.5,(2*rightIndex-1)*cellHeight + 0.5);
ctxx.stroke();
ctxx.closePath();
},
任意给出两个点的x,y轴坐标 用html5的canvas 画出带箭头弧形连线
!DOCTYPE html
html
head
meta charset=UTF-8 /
titletest/title
style type="text/css"
/style
script type="text/javascript"
var timer = null, SLEEP = 1000;
var timef = function ()
{
var time = document.getElementById ('time');
var s = parseInt (time.firstChild.nodeValue);
time.firstChild.nodeValue = s - 1 + 's';
if (s == 1)
{
alert ('time expires');
time.firstChild.nodeValue = '10s';
clearTimeout (timer);
return;
}
timer = setTimeout (timef, SLEEP);
}
/script
/head
body
Remaining Time:
span id="time"10s/span
br /
button onclick="timef();"time/button
/body
/html
关于html连线画代码和html链接怎么做的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
