一、坐标系
其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图
声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园
二、Stroke 和 Fill
HTML5中将图形分为两大类：
第一类称作 Stroke，我的理解就是轮廓、勾勒或者线条，总之，图形是由线条组成的；
第二类称作 Fill，就是填充区域
上下文对象中有两个绘制矩形的方法，可以让我们很好的理解这两大类图形的区别：
一个是 strokeRect，还有一个是 fillRect
下面的代码分别用这两个方法来绘制矩形，你可以分别点击两个按钮来看看有什么不同，从而理解 stroke 和 fill 的区别
设置画布
<canvas id=”test1″ width=”200″ height=”200″ style=” background-color: grey”>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type=”button” value=”strokeRect” onclick=”strokeRect();”/>
<input type=”button” value=”fillRect” onclick=”fillRect();”/>
strokeRect 和 fillRect
function strokeRect(){
var canvas = document.getElementById(‘test1’);
var ctx=canvas.getContext(“2d”);
ctx.clearRect(0,0,200,200);
ctx.strokeStyle=”blue”;
ctx.strokeRect(10,10,180,180);
}
function fillRect(){
var canvas = document.getElementById(‘test1’);
var ctx=canvas.getContext(“2d”);
ctx.clearRect(0,0,200,200);
ctx.fillStyle=”blue”;
ctx.fillRect(10,10,180,180);
}
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
三、颜色
上下文对象有两个属性可以用来设置颜色：strokeStyle 和 fillStyle
strokeStyle 的值决定了你当前要绘制的线条的颜色
fillStyle 的值决定了你当前要填充的区域的颜色
颜色值应该是符合CSS3 颜色值标准的有效字符串。下面的例子都表示同一种颜色。
//这些 fillStyle 的值均为 ‘橙色’，ctx 是上下文对象
