html51px问题以及绘制坐标系网格的方法

来源：懂视网责编：小采时间：2020-11-27 15:28:15

html51px问题以及绘制坐标系网格的方法

html51px问题以及绘制坐标系网格的方法:在canvas中，要画出1px的线条，默认情况下是不行的context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 100 ); context.closePath(); context.stroke(); context.beginPath(); conte

推荐度：

点击下载本文 文档为doc格式

导读html51px问题以及绘制坐标系网格的方法:在canvas中，要画出1px的线条，默认情况下是不行的context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 100 ); context.closePath(); context.stroke(); context.beginPath(); conte

在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();
 }

html51px问题以及绘制坐标系网格的方法

推荐度：

点击下载本文 文档为doc格式

标签：方法坐标系问题

热门焦点

html51px问题以及绘制坐标系网格的方法

html51px问题以及绘制坐标系网格的方法

html51px问题以及绘制坐标系网格的方法

最新推荐

猜你喜欢

热门推荐