Heim > Artikel > Web-Frontend > So lösen Sie das Problem der Grate beim Canvas-Strichzeichnen in HTML5

So lösen Sie das Problem der Grate beim Canvas-Strichzeichnen in HTML5

小云云Original: 2018-03-03 10:16:522405Durchsuche

Die von allen Strichzeichnungsanweisungen von Html5 Canvas gezeichneten Linien haben raue Kanten (z. B. lineTo, arcTo, StrokeRect). Dies liegt daran, dass die Position, die dem ganzzahligen Koordinatenwert in Canvas entspricht, zufällig die Lücke zwischen den Bildschirmpixeln ist , dann werden beim Rendern von Linien gemäß solchen Koordinaten die Pixelpunkte auf beiden Seiten der Lücke verwendet. Auf diese Weise sehen Sie eine Linie mit zwei Pixeleffekten um den ursprünglichen Pixelpunkt um +0,5 zu versetzen.

Im Folgenden finden Sie einen Vergleich der Effekte vor und nach der Verarbeitung:

<!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:&#39;rgb(255,255,255)&#39; }        
            * @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:&#39;rgb(0,0,0)&#39;});  
            c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,strokeStyle:&#39;rgb(255,255,255)&#39;});  
            c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1,strokeStyle:&#39;rgb(0,0,0)&#39;}); //普通线  
            c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:&#39;rgb(0,0,0)&#39;}); //+0.5偏移  
   
        }  
     
    </script>  
</head>  
<body>  
↓ 处理的　　↓ 普通的　　↓ +0.5偏移的<br />  
</body>  
</html>

Verwandte Empfehlungen:

HTML5-Leinwandmalerei Linientechnik – Zeichnen einer dünnen Linie mit einer Breite von einem Pixel_HTML5-Tutorial-Technik

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Grate beim Canvas-Strichzeichnen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 canvas

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Methode zum Aufrufen der Baidu Map API, um den aktuellen Standort abzurufen und direkt zum Ziel zu navigierenNächster Artikel：HTML5-Methode zum Aufrufen der Baidu Map API, um den aktuellen Standort abzurufen und direkt zum Ziel zu navigieren

In Verbindung stehende Artikel

Mehr sehen