HTML5边玩边学（2）：基础绘图
2010-09-18 10:57
232 查看
| 在前一篇博客中，我们测试了 canvas 标签的用法，并得到了 canvas 标签的渲染上下文对象， 但是并没有用它绘制任何图形。在这一篇中，我们先了解一下HTML5绘图的一些基础概念，然后再来画几个图形玩玩。 一、坐标系 其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图 绘制网格 <script type="text/javascript"> function drawMap(){ var canvas = document.getElementById('test3'); var ctx=canvas.getContext("2d"); ctx.beginPath(); for (var x = 0.5; x < 500; x += 10) { ctx.moveTo(x, 0); ctx.lineTo(x, 375); } for (var y = 0.5; y < 375; y += 10) { ctx.moveTo(0, y); ctx.lineTo(500, y); } ctx.strokeStyle = "#eee"; ctx.stroke(); } function clearMap(){ var canvas = document.getElementById('test3'); var ctx=canvas.getContext("2d"); ctx.clearRect(0,0,500,375); } </script> 你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 这段代码中，有一处奇怪的地方，就是坐标循环是从0.5开始的，这是为什么呢？ 如下图，假如我想绘制一条从(1,0)到(1,3)的线，由于线的默认宽度是一个像素，所以在我想象中应该绘制成深绿色的部分，即在坐标 1 两边各占半个像素的宽度。 然而，浏览器的最小单位是一个像素，所以他会向两边扩展，实际绘制出来的浅绿色的部分，即占用了两个像素的宽度。这样，我们绘制的线条在坐标上就不精确了  如下图，如果我们给出的起始坐标是(1.5,0)和(1.5,3)，那么线条的宽度才是正确的一个像素。  七、清空画布 上面给出的两段代码中，我们都用到了清空画布，用到的方法如下： clearRect(x,y,width,height)： 它接受四个参数， x 和 y 指定矩形左上角(相对于原点)的位置，width 和 height 是矩形的宽和高。调用该方法会将给出的矩形区域中所有绘制图形都清空，露出画布的背景 声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园 //==========================================
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
相关文章推荐
|