html canvas 画曲线 想清除某个曲线怎么办

html canvas 画曲线 想清除某个曲线怎么办,第1张

不知道你要的效果是怎么样的,(1)如果仅清除这一条线,可以用clearRect()方法,类似橡皮擦。(2)如果想不影响其他的画布,可以设置分层的canvas (3)保存原先的画,擦除部分,重画

以下代码解决你的问题

文本输入边框.html    文件代码清单如下:

<!doctype html>

<html lang="zh">

    <head>

        <meta charset="utf-8">

        <title>文本输入边框</title>

        <link rel="stylesheet" href="inputborder.css">

    </head>

    <body>

        <form action="" method="">

            <fieldset>

                <label>用户登录</label>

                <label>用户名</label>

                <input type="text" id="Username">

                <label>密码</label>

                <input type="password" id="Pwd">

            </fieldset>

        </form>

    </body>

</html>

inputborder.css   文件代码清单如下:

form {

position: absolute   /* 表单定位 */

top: 50px            /* 表单定位 */

left: 200px          /* 表单定位 */

color: rgb(120, 120, 120)

}

fieldset {

border: none

display: inline

}

label {

display: block

margin: 0

padding: 10px 1px

width: 150px

font-size: 16px

letter-spacing: 2px

text-align: center

}

input {

margin: 0

padding: 10px 0

border: 1px solid rgb(180, 180, 180)

border-radius: 8px                /* 圆角边框 */

width: 150px

font-size: 16px

text-align: center

}

input:hover {

border: 1px solid rgb(255, 0, 0)

}

纯js不好实现,但是配合html,css就有了近似的办法.下面提供一个解决方案,已知两个点的坐标,为它们画一条带箭头的弧线.

<html>

<head>

<meta http-equiv = "content-type" content = "text/htmlcharset = gb2312">

<title>箭头弧线</title>

<style type = "text/css">

span { position: absolutewidth: 5pxheight: 5pxbackground-color: #0000ffdisplay: blockborder-radius: 50%}

</style>

<script language = "javascript">

function locateO () {

var x0 = parseInt (spnA.style.left, 10), y0 = parseInt (spnA.style.top, 10), x1 = parseInt (spnB.style.left, 10), y1 = parseInt (spnB.style.top, 10), horizontalDistance = Math.abs (x1 - x0), verticalDistance = Math.abs (y1 - y0), x = Math.min (x0, x1) + horizontalDistance / 2, y = Math.min (y0, y1) + verticalDistance / 2, distance = Math.sqrt (Math.pow (horizontalDistance, 2) + Math.pow (verticalDistance, 2)), array = new Array (x0, y0, x1, y1, distance)

spnO.style.left = x

spnO.style.top = y

return array

}

function getRadian (x0, y0, x1, y1) {

var horizontalDistance = Math.abs (x1 - x0), verticalDistance = Math.abs (y1 - y0), rate = horizontalDistance == 0 ? 0 : verticalDistance / horizontalDistance, radian

if (y1 <y0) {

if (x1 >x0) {

radian = - Math.atan (rate)

} else if (x1 == x0) {

radian = - Math.PI / 2

} else {

radian = - (Math.PI - Math.atan (rate))

}

} else if (y1 == y0) {

radian = x1 >left ? 0 : - Math.PI

} else if (x1 <x0) {

radian = - (Math.PI + Math.atan (rate))

} else if (x1 == x0) {

radian = - Math.PI * 3 / 2

} else {

radian = - 2 * Math.PI + Math.atan (rate)

}

return radian

}

function getAngle (radian) {

var angle = - radian * 180 / Math.PI

return angle

}

function slantArc (x0, y0, x1, y1) {

var radian = getRadian (x0, y0, x1, y1), angle = 360 - getAngle (radian)

cnvArc.style.transform = "rotate(" + angle + "deg)"

}

function drawArc (x0, y0, width) {

var context = cnvArc.getContext ("2d"), radius = width / 2, height = radius / 2

cnvArc.width = width + 10

cnvArc.height = height

cnvArc.style.left = x0

cnvArc.style.top = y0 - height

context.ellipse (radius + 5, height, radius, height / 2, 0, 0, Math.PI * 2)

context.strokeStyle = "#00ff00"

context.stroke ()

}

function hex (figure) {

return figure.toString (16)

}

function zeroize (cluster) {

if (cluster.length <2) {

cluster = 0 + cluster

}

return cluster

}

function getColour (red, green, blue) {

return "#" + zeroize (hex (red)) + zeroize (hex (green)) + zeroize (hex (blue))

}

function printArc () {

var width = cnvArc.width, height = cnvArc.height, context = cnvArc.getContext ("2d"), imageData = context.getImageData (0, 0, width, height), data = imageData.data, coordinates = new Array (), cluster = "", i, red, green, blue, colour, index, x, y

for (i = 0i <data.lengthi += 4) {

red = data [i]

green = data [i + 1]

blue = data [i + 2]

colour = getColour (red, green, blue)

index = i / 4

y = parseInt (index / width, 10)

x = index % width

if (x == 0) {

//console.log (y + "\n" + cluster)

cluster = ""

}

cluster += x + ":" + colour + " "

if (colour == "#00ff00") {

coordinates.push (new Array (x, y))

}

}

return coordinates

}

function sortCoordinates (coordinates, direction) {

var i = 0, flag, j, coordinate

do {

flag = false

for (j = 0j <coordinates.length - 1 - ij ++) {

if (direction &&(coordinates [j] [0] >coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] &&coordinates [j] [1] >coordinates [j + 1] [1]) || ! direction &&(coordinates [j] [0] <coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] &&coordinates [j] [1] >coordinates [j + 1] [1])) {

coordinate = coordinates [j]

coordinates [j] = coordinates [j + 1]

coordinates [j + 1] = coordinate

flag = true

}

}

i ++

} while (flag)

}

function drawArrow (x0, y0, x1, y1) {

var context = cnvArc.getContext ("2d"), colour = "#00ff00", angle = (x1 - x0) / (y1 - y0)

context.strokeStyle = colour

context.fillStyle = colour

context.setLineDash ([3, 3])

context.beginPath ()

context.arc (x0, y0, 1, 0, 2 * Math.PI)

context.translate (0, 0, 0)

context.moveTo (x0, y0)

context.lineTo (x1, y1)

context.fill ()

context.stroke ()

context.save ()

context.translate (x1, y1)

angle = Math.atan (angle)

context.rotate ((y1 >= y0 ? 0 : Math.PI) - angle)

context.lineTo (- 3, - 9)

context.lineTo (0, - 3)

context.lineTo (3, - 9)

context.lineTo (0, 0)

context.fill ()

context.restore ()

context.closePath ()

}

function initialize () {

var array = locateO (), x0 = array [0], y0 = array [1], x1 = array [2], y1 = array [3], width = array [4], direction = x1 >x0, coordinates, length, coordinate0, coordinate1, x2, y2, x3, y3

drawArc (x0, y0, width)

coordinates = printArc ()

length = coordinates.length

sortCoordinates (coordinates, direction)

coordinate0 = coordinates [length - 2]

x2 = coordinate0 [0]

y2 = coordinate0 [1]

coordinate1 = coordinates [length - 1]

x3 = coordinate1 [0]

y3 = coordinate1 [1]

drawArrow (x2, y2, x3, y3)

slantArc (x0, y0, x1, y1)

}

</script>

</head>

<body style = "margin: 0" onload = "initialize ()">

<span id = "spnA" style = "left: 50pxtop: 150px"></span>

<span id = "spnB" style = "left: 850pxtop: 350px"></span>

<span id = "spnO"></span>

<canvas id = "cnvArc" style = "position: absolutebackground-color: rgb(255, 255, 0, 0.01)z-index: 1transform-origin: 0 100%"></canvas>

</body>

</html>

复制进来的代码都不带缩进的吗?

该代码纯手写,不从第三方处盗用.仅供参考.


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7303653.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存