彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-12-07 08:21 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

[js高手之路]html5 canvas教程 - 1px问题以及绘制坐标

 1             drawGrid('#09f', 10, 10);
 2             function drawGrid(color, stepx, stepy) {
 3                 context.save()
 4 
 5                 context.strokeStyle = color;
 6                 context.lineWidth = 0.5;
 7                 context.clearRect(0, 0, context.canvas.width, context.canvas.height);
 8 
 9                 for (var i = stepx   0.5; i < context.canvas.width; i  = stepx) {
10                     context.beginPath();
11                     context.moveTo(i, 0);
12                     context.lineTo(i, context.canvas.height);
13                     context.stroke();
14                 }
15 
16                 for (var i = stepy   0.5; i < context.canvas.height; i  = stepy) {
17                     context.beginPath();
18                     context.moveTo(0, i);
19                     context.lineTo(context.canvas.width, i);
20                     context.stroke();
21                 }
22 
23                 context.restore();
24             }

上述代码中,context是canvas的上下文,在这里段代码中,小编画了2条线,上边那条线并不是1px,上边包车型大巴那条线才是1px

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

图片 1

很鲜明,那条黑线,侵吞的是2行,正是2px大小,而红线攻陷了生龙活虎行,才是的确的1px的线条,也等于说,在canvas中,你只要急需绘制一条1px的线条,那么坐标后边要丰盛0.5,那么,接下去,我们就来绘制一个坐标系,x,y方向的坐标系刻度为10px.

图片 2

 1             context.beginPath();
 2                 context.moveTo( 100, 100 );
 3                 context.lineTo( 400, 100 );
 4                 context.closePath();
 5                 context.stroke();
 6 
 7                 context.beginPath();
 8                 context.strokeStyle = 'red';
 9                 context.moveTo( 100.5, 200.5 );
10                 context.lineTo( 400.5, 200.5 );
11                 context.closePath();
12                 context.stroke();

在canvas中,要画出1px的线条,暗许景况下是那多少个的

图片 3

 

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:[js高手之路]html5 canvas教程 - 1px问题以及绘制坐标

关键词: