用Canvas制作简单的画图工具

今天用Canvas制作了一个画图工具，非常简单，功能也不是很多，主要有背景网格，画线，画圆，画矩形和画圆角矩形，也用到了canvas的一些基本知识，在这里一一列举。

如何绘制真正的1像素的线段？

如果在像素边界处绘制一条1像素宽的垂直线段，那么canvas的绘图环境对象会试着将半个像素画在边界中线的右边，将另外半个像素画在边界中线的左边。然而，在一个整像素的范围内绘制半个像素宽的线段是不可能的，，所以左右两个方向上的半像素都被扩展为1像素。如图所示

用Canvas制作简单的画图工具

本来我们想要将线段绘制在深灰色的区域内，但实际上浏览器却将其延伸绘制到整个灰色的范围内。

如果我们将线段绘制在两个像素之间的那个像素中，这时出现的效果便成了下面图片展示的效果：

用Canvas制作简单的画图工具

这是因为当线段绘制在两个像素之间，中间左右两端的那半个像素就不会再延伸了，它们合起来恰好占据了一个像素的宽度。

所以，如果要绘制一条真正的1像素宽的线段，必须将该线段绘制在某两个像素之间的那个像素中。

在绘制背景网格中，绘制的线段宽度为0.5像素的，这是因为所有浏览器的Canvas都实现了“抗锯齿”技术，能呈现出“亚像素”线段的绘制效果来。

背景网格的绘制代码如下：

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

drawGrid