html5 canvas 所有的画线指令画出来的线条都有毛边（比如 lineto， arcto，strokerect），这是因为在canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝，那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点，这样即便设置了linewidth为1也将看到两个象素效果的线条，解决方法原象素点+0.5进行偏移。
下面是处理前后的效果比较：
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <h王昌龄 长信怨ead> <meta http-equiv="content-type" content="text/html; chart=utf-8"> <title>canvastest</title> <script type="text/javascript" src="http://www.pyz橡皮图章y.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 }],{linewi春节诗词dth: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> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 08:20:27，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e39d8f39b50375853db040000db10e2f.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：详解Html5 Canvas画线有毛边解决方法.doc
本文 PDF 下载地址：详解Html5 Canvas画线有毛边解决方法.pdf
| 留言与评论（共有 0 条评论） |
