跟我学canvas (二 绘制图形)
2012-03-12 10:59
218 查看
在真正开始之前,我们需要先探讨 canvas 的网格(grid)或者坐标空间(coordinate space)。在前一页的HTML模板里有一个150像素宽, 150像素高的 canvas 对象。我在画面上叠加上默认网格,如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角(坐标(0,0))。画面里的所有物体的位置都是相对这个原点。这样,左上角的蓝色方块的位置就是距左边x像素和距上边Y像素(坐标(x, y))。后面的教程中我们将学会如何把移动原点,旋转以及缩放网格。不过现在我们会使用默认的状态。canvas 只支持一种基本形状——矩形,所以其它形状都是有一个或多个路径组合而成。还好,有一组路径绘制函数让我们可以绘制相当复杂的形状。
矩形 Rectangles
我们首先看看矩形吧,有三个函数用于绘制矩形的:fillRect(x,y,width,height) : Draws a filled rectangle strokeRect(x,y,width,height) : Draws a rectangular outline clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
它们都接受四个参数,
x和
y 指定矩形左上角(相对于原点)的位置,
width和
height是矩形的宽和高。好,实战一下吧。
绘制矩形的例子
function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } }
出来的结果应该和下面的是一样的。
fillRect函数画了一个大的黑色矩形(100x100),
clearRect函数清空了中间 60x60 大小的方块,然后
strokeRect函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里,我们会看到和
clearRect函数差不多另外两个方法,以及如何去改变图形的填充和边框颜色。
// document.write("哦,你的浏览器不支持canvas");
var canvas = document.getElementById('c1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
// ]]>
与下一节的路径函数不一样,这三个函数的效果会立刻在 canvas 上反映出来。
绘制路径
不像画矩形那样的直截了当,绘制路径是需要一些额外的步骤的。beginPath() closePath() stroke() fill()
第一步是用
beginPath创建一个路径。在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用
beginPath,子路径组都会被重置,然后可以绘制新的图形。
第二步就是实际绘制路径的部分,很快我们就会看到。
第三步是调用
closePath方法,它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的。
最后一步是调用
stroke或
fill 方法,这时,图形才是实际的绘制到 canvas上去。
stroke是绘制图形的边框,
fill会用填充出一个实心图形。
注意:当调用
fill时,开放的路径会自动闭合,而无须调用
closePath。
画一个简单图形(如三角形)的代码如下。
ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill();
moveTo
moveTo是一个十分有用的方法,虽然并不能用它来画什么,但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起,并从一个点移动到另一个点的过程。它接受
x和
y(新的坐标位置)作为参数。当 canvas 初始化或者调用
beginPath的时候,起始坐标设置就是原点(0,0)。大多数情况下,我们用
moveTo方法将起始坐标移至其它地方,或者用于绘制不连续的路径。看看右边的笑脸,红线就是使用
moveTo 移动的轨迹。
绘制各种线条 Lines
我们用lineTo方法来画直线。
lineTo方法接受终点的坐标(x,y)作为参数。起始坐标取决于前一路径,前一路径的终点即当前路径的起点,起始坐标也可以通过
moveTo方法来设置。fill和 strok 绘三角形的区别,上面也提到过,使用fill路径会自动闭合,但使用 stroke 不会,如果不关闭路径,勾画出来的只有两边。
相关文章推荐
- HTML5 绘制图形canvas 使用路径(一)
- js实现canvas绘制的图形的拖动效果
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
- html5 canvas 笔记一(基本用法与绘制图形)
- Android画布和图形绘制---Canvas and Drawables(二)
- 安卓自定义View基础05-Canvas之基础图形绘制,点,线,矩形,圆,椭圆,弧形等
- Android画布和图形绘制---Canvas and Drawables(二)
- canvas绘制简单图形
- HTML5之Canvas 2D入门2 - Canvas绘制图形
- HTML5移动开发极速快三平台出租之路——Canvas图形绘制基础
- 安卓自定义View进阶-Canvas之绘制图形
- Canvas与Drawable绘制图形
- qml学习--------------利用Canvas绘制简单图形
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- 自定义view(二)canvas与图形绘制
- 一则通过Android Canvas动态绘制图形的实例介绍
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
- 在Canvas中利用Path绘制基本图形
- HTML5快速入门实例(一)Canvas绘制图形
- Android画布和图形绘制---Canvas and Drawables(五)