HTML5边玩边学（2）基础绘图实现方法

一、坐标系

其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图

声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左和出处博客园

二、Stroke 和 Fill

HTML5中将图形分为两大类：

第一类称作 Stroke，我的理解就是轮廓、勾勒或者线条，总之，图形是由线条组成的；

第二类称作 Fill，就是填充区域

上下文对象中有两个绘制矩形的方法，可以让我们很好的理解这两大类图形的区别：

一个是 strokeRect，还有一个是 fillRect

下面的代码分别用这两个方法来绘制矩形，你可以分别点击两个按钮来看看有什么不同，从而理解 stroke 和 fill 的区别
设置画布

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表