Html5 Canvas 画椭圆有锯齿：因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝，那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点，这样即便设置了lineWidth为1也将看到两个象素效果的线条，解决方法原象素点+0.5进行偏移。
下面是处理前后的效果比较：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>canvasTest</title>
<script type="text/javascript" src="http://www.pyzy.net/Demo/html5_cancas_js/excanvas.js"></script>
<script type="text/javascript">
var MyCanvas = function(boxObj, width, height) {
//序号、计数
this.index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1
var cvs = document.createElement("canvas")
cvs.id = "myCanvas" + this.index
cvs.width = width || 800
cvs.height = height || 600
(boxObj || document.body).appendChild(cvs)
//excanvas框架中针对ie加载canvas延时问题手动初始化对象
if (typeof G_vmlCanvasManager != "undefined") G_vmlCanvasManager.initElement(cvs)
//2D画布对象
this.ctx = cvs.getContext("2d")
/* * 绘制线条
* @ops JSON对象，可按实际支持属性扩展，示例： { lineWidth:1,strokeStyle:'rgb(255,255,255)' }
* @dotXY:{ x:0, y:0 } ||[{ x:0, y:0 },{ x:0, y:0 }]
*/
this.drawLine = function(dotXY, ops) {
this.ctx.beginPath()
for (var att in ops) this.ctx[att] = ops[att]
dotXY = dotXY.constructor == Object ? [dotXY || { x: 0, y: 0}] : dotXY
this.ctx.moveTo(dotXY[0].x, dotXY[0].y)
for (var i = 1, len = dotXY.length i < len i++) this.ctx.lineTo(dotXY[i].x, dotXY[i].y)
this.ctx.stroke()
}
}
window.onload=function(){
var c1 = new MyCanvas()
c1.drawLine([{ x: 10, y: 10 }, { x: 10, y: 200 }],{lineWidth:2,strokeStyle:'rgb(0,0,0)'})
c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,strokeStyle:'rgb(255,255,255)'})
c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}) //普通线
c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}) //+0.5偏移
}
</script>
</head>
<body>
↓ 处理的↓ 普通的↓ +0.5偏移的<br />
</body>
</html>
纯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>
复制进来的代码都不带缩进的吗?
该代码纯手写,不从第三方处盗用.仅供参考.
<ul style="list-style:noneborder:1px #FF0000 solidborder-radius: 4pxwidth:100px"><li>123456</li>
<li>1231544</li>
</ul>
用这种方法也行，在样式里面加上border-radius: 4px，这个就表示圆角；但这个是html5的标签；
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）