下面是处理前后的效果比较：
<!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/htmlcharset=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.lengthi <leni++) 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>
canvas画出来的图片是位图，位图在放大的情况下是会模糊的，然而你所说的“缩放”应该是在canvas宽高固定后通过改变其style样式表进行放大缩小，当然图片是放大了，可是也模糊了，因为不是矢量图呀。这个问题是你TerraBuilder生成的数据的步骤错了，导致你在出现这种问题，我发一个连接给你，http://www.docin.com/p-101620065.html。你按照这个去重新做一遍，也有可能是由于你的文件太小所以边缘过于模糊缩导致。你在PS里面调一下对比度和亮度再试试。还可以建议你换一个软件，也可以达到这样的效果，连接是这个http://jingyan.baidu.com/article/64d05a02752b00de55f73b91.html。怎么说在实际应用中，多尝试用一些其他软件，祝你生活愉快
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）