]]>
]]>
在前一博客中Q我们测试了(jin) canvas 标签的用法，q得C(jin) canvas 标签的渲染上下文对象Q?但是q没有用它绘制Q何图形。在q一中Q我们先?jin)解一下HTML5l图的一些基概念Q然后再来画几个囑Ş玩玩?/p>
一、坐标系
其实只要玩过一点点囑Ş~程的h都知道，?sh)脑上的坐标pd数学上的坐标pȝ微有点不同，坐标的原点在l制区域Q这里是CanvasQ的左上角，X轴正向朝叻IY轴正向朝下，如下?/p>
声明Q?/strong>为本文ؓ(f)原创文章Q作者保留所有权利！Ƣ迎转蝲Q{载请注明作?font color="#ff0000">左N和出?font color="#ff0000">博客?/strong>
二、Stroke ?Fill
HTML5中将囑Ş分ؓ(f)两大c：(x)
W一cȝ?StrokeQ我的理解就是轮廓、勾勒或者线条，MQ图形是q条组成的Q?/p>
W二cȝ?FillQ就是填充区?/p>
上下文对象中有两个绘制矩形的Ҏ(gu)Q可以让我们很好的理解这两大cd形的区别Q?/p>
一个是 strokeRectQ还有一个是 fillRect
下面的代码分别用q两个方法来l制矩ŞQ你可以分别点击两个按钮来看看有什么不同，从而理?stroke ?fill 的区?/p>
讄d
<input type="button" value="strokeRect" onclick="strokeRect();"/>
<input type="button" value="fillRect" onclick="fillRect();"/>
strokeRect ?fillRect
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);
}
三、颜?/strong>
上下文对象有两个属性可以用来设|颜Ԍ(x)strokeStyle ?fillStyle
strokeStyle 的值决定了(jin)你当前要l制的线条的颜色
fillStyle 的值决定了(jin)你当前要填充的区域的颜色
颜色值应该是W合CSS3 颜色值标?/a>的有效字W串。下面的例子都表C同一U颜艌Ӏ?/p>
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
关于颜色Q以后会(x)有更多的说明?/p>
四、基本绘?/strong>
除了(jin)上面l出的两个绘制矩形的Ҏ(gu)外，上下文对象还有几个方法可以用来绘制一些基本图形，如下Q?/p>
moveTo(x,y)QmoveToҎ(gu)q不能画ZQ何东西，它只是将ȝ的当前点Ud?x,y)?/p>
lineTo(x,y)Q从当前点到Qx,yQ点l制一条直Uѝ注意：(x)l制完成后，当前点就变成?x,y)Q除非你?moveTo Ҏ(gu)L变他
arc(x, y, radius, startAngle, endAngle, anticlockwise) Q绘制一条弧U?/p>
quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Q这两个Ҏ(gu)都是l制贝叶斯曲U，具体用法看参考手?/p>
rect(x, y, width, height) Q绘制一个矩形。注意：(x) 当它被调用时QmoveTo Ҏ(gu)?x)自动被调用Q参Cؓ(f)(0,0)Q于是v始坐标又恢复成初始原点了(jin)?
有了(jin)直线、弧Uѝ曲Uѝ方形和圆Şq几U基本图形，我们可以组合出更复杂的囑Ş?/p>
五、理解绘制\?Drawing Path
上一文章中说过Q我们绘制的囑Ş是先l制C个抽象的上下文对象中Q其实就是内存中Q，然后再将上下文对象输出到昄讑֤上，q个输出到显C备的q程不需要我们操?j)。但是有时候我们ƈ不想立刻输出每一ơ绘制动作，也许我想让一l绘制动作完成以后，再集中一块输出， 比如一个围棋盘有19×19条直U组成，正常情况下需要向xC备输?9×19ơ，但是如果我们先暂停向昄讑֤输出Q等在上下文中（内存中）(j)全部l制完成19×19条直U时Q再向显C备输出，只需要输Zơ就可以?jin)?/p>
q种情况在HTML5中叫做绘制\径，它由几个上下文对象的Ҏ(gu)l成Q?/p>
beginPath() Q开始\径，意思就是在你调用这个方法后Q你l制的图形就不会(x)再向屏幕输出?jin)，而只是画C(jin)上下文对象中Q内存中Q?/p>
stroke() Q将你调?beginPath Ҏ(gu)以后l制的所有线条，一ơ性输出到昄讑֤?/p>
closePath() Q如果你调用 beginPath Ҏ(gu)以后Q在上下文对象中q行?jin)一pd的绘Ӟ但是得到的图形是不闭合的Q这个方法将?x)帮你补上最后一条直U，你的图形闭合v来?/p>
注意Q?/span>closePathq不向屏q输出图形，而只是在上下文对象中补上一条线Q这个步骤不是必需?/u>?/p>
fill() Q?/p>
如果你的l制路径l成的图形是闭的，q个Ҏ(gu)用 fillStyle 讄的颜色填充图形，然后立即向屏q输出； 如果l制路径不是闭的，q个Ҏ(gu)?x)先图形闭合v来，然后再填充输出?/p>
注意Q?/strong>所有的 fill 囑ŞQ如 fillRect {，都是立刻向屏q输出的Q他们没有绘制\径这个概?/u> 下面的代码将l制一个简单的填充三角形?/p>
注意Q?/span>l制三角形的时候，默认的背景色为白Ԍ默认的前景色为黑?/u>?/p>
六、半个单位的坐标 q里q要回过头来说说坐标Q下面的代码是在d上绘制网|点击“ȝ?#8221;按钮可以看见效果 q段代码中，有一处奇怪的地方Q就是坐标@环是?.5开始的Q这是ؓ(f)什么呢Q?/p>
如下图，假如我想l制一条从(1,0)?1,3)的线Q由于线的默认宽度是一个像素，所以在我想象中应该l制?strong style="color: #339966">q?/u>的部分，卛_坐标 1 两边各占半个像素的宽度?/p>
然而，览器的最单位是一个像素，所以他?x)向两边扩展Q实际绘制出来的绿?/u>的部分，卛_用了(jin)两个像素的宽度。这P我们l制的线条在坐标上就不精了(jin) 如下图，如果我们l出的v始坐标是(1.5,0)?1.5,3)Q那么线条的宽度才是正确的一个像素?/p>
七、清I画?/strong> 上面l出的两D代码中Q我们都用到?jin)清I画布，用到的方法如下：(x) clearRect(x,y,width,height)Q?/p>
它接受四个参敎ͼ x ?y 指定矩Ş左上?相对于原?的位|，width ?height 是矩形的宽和高。调用该Ҏ(gu)?x)将l出的矩形区域中所有绘制图形都清空Q露出画布的背景 声明Q?/strong>为本文ؓ(f)原创文章Q作者保留所有权利！Ƣ迎转蝲Q{载请注明作?font color="#ff0000">左N和出?font color="#ff0000">博客?/strong> //========================================== 讄d
<input type="button" value="M? onclick="drawTri();"/>
<input type="button" value="清除" onclick="clearTri();"/>
l制三角?/span>
function drawTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById('test2');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,200,200);
}
</script>讄d
<input type="button" value="ȝ? onclick="drawMap();"/>
<input type="button" value="清除" onclick="clearMap();"/>l制|格
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>
]]>
]]>