Rumah  >  Artikel  >  hujung hadapan web  >  html5 1px问题以及绘制坐标系网格的方法

html5 1px问题以及绘制坐标系网格的方法

一个新手
一个新手asal
2017-10-19 10:06:072257semak imbas

在canvas中,要画出1px的线条,默认情况下是不行的

context.beginPath();
                context.moveTo( 100, 100 );
                context.lineTo( 400, 100 );
                context.closePath();
                context.stroke();
                context.beginPath();
                context.strokeStyle = 'red';
                context.moveTo( 100.5, 200.5 );
                context.lineTo( 400.5, 200.5 );
                context.closePath();
                context.stroke();

上述代码中,context是canvas的上下文,在这段代码中,我画了2条线,上面那条线并不是1px,下面的那条线才是1px

上面你可能还看不清楚,那条黑线到底是不是1px,你可以把他们放到画图软件或者photoshop中,放大,然后打开坐标,就能看到如下效果:

很明显,这条黑线,占据的是2行,就是2px大小,而红线占据了一行,才是真正的1px的线段,也就是说,在canvas中,你如果需要绘制一条1px的线段,那么坐标后面要加上0.5,那么,接下来,我们就来绘制一个坐标系,x,y方向的坐标系刻度为10px.


drawGrid('#09f', 10, 10);
            function drawGrid(color, stepx, stepy) {
                context.save()

                context.strokeStyle = color;
                context.lineWidth = 0.5;
                context.clearRect(0, 0, context.canvas.width, context.canvas.height);

                for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
                    context.beginPath();
                    context.moveTo(i, 0);
                    context.lineTo(i, context.canvas.height);
                    context.stroke();
                }

                for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
                    context.beginPath();
                    context.moveTo(0, i);
                    context.lineTo(context.canvas.width, i);
                    context.stroke();
                }

                context.restore();
            }

Atas ialah kandungan terperinci html5 1px问题以及绘制坐标系网格的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn