|
|
在前一篇博客中，我们测试了 canvas 标签的用法，并得到了 canvas 标签的渲染上下文对象，但是并没有用它绘制任何图形。在这一篇中，我们先了解一下HTML5绘图的一些基础概念，然后再来画几个图形玩玩。
一、坐标系
其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是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();"/>
it知识库：HTML5边玩边学（2）：基础绘图，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
