下面是處理前后的效果比較：

 !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 

相關推薦：

HTML5 Canvas畫線技巧——實現繪制一個像素寬的細線_html5教程技巧

以上就是Html5中Canvas畫線有毛邊如何解決的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。