shadowOffsetX

2D上下文的场地有何样?

varcanvas=document.getElementById;varcontext=canvas.getContext;context.fillStyle="#66ff66";context.strokeStyle="#990000";context.lineWidth=5;context.fillRect;context.strokeRect;context.save();context.fillStyle="#6666ff";context.fillRect;context.strokeRect;context.save();context.strokeStyle="#000099";context.fillRect;context.strokeRect;context.restore();context.fillRect;context.strokeRect;context.restore();context.fillRect;context.strokeRect;

shadowOffsetY

富有的2D上下文的质量都以足以保留和还原的性质。你在回复一个境况的时候,绘制区域并不会自动实行回复。你回复的无非是2D上下文的装置,那几个设置囊括:

您的浏览器不援救HTML5 Canvas!

上边的代码获得的结果如下:

textBaseline

情景栈对于改换canvas的合成形式,图形的转移设置和在须求再次回到早先设置的情况的场景中优异得力。

神蹟,大家在canvas上绘制图形的时候,常常要求退换2D上下文的情景。比方来讲,你在绘制直线或矩形的时候须求一种strokStyle,在绘制下一条直线或矩形的时候供给另一种strokStyle。又或许是区别的填充色,旋转角度等等。

将二个绘制状态举办压栈和出栈的措施如下:

归来HTML5 Canvas教程目录

globalAlpha

地点的列表实际不是欧洲经济共同体的列表。还大概有越来越多的性质归属2D上下文状态的一有个别。

globalCompositionOperation

经过保留和回复合成情势或图片转变设置,你能够确定保证它们被科学的重新初始化。不然,你要想苏醒到以前设置的某种情状时十一分困难的。

小编们不容许在绘制图形在此之前就设置好全部图形的图景,可是大家可以将如今的景况压栈到叁个状态栈中。在这里个状态栈中,最后压入的景况将首先被弹出。通过这种艺术大家得以足够方便的回复到前二遍的绘图状态。

shadowColor

strokeStyle

当大家在HTML5
canvas中应用2D左右文来绘制图形的时候,2D光景文少禽处于某种景况中。你能够由此调控2D上下文的个性来安装这么些情状,举例fillStyle属性和strokeStyle质量。全体的那一个操作被叫做2D上下文的state

对此叁个状态栈,你可以压入八个状态,然后在将它们依次弹出。来看上边包车型大巴例证:

HTML5 canvas绘图状态的例证

context.save();//将一个状态压入状态栈中context.restore();//将最前面的状态出栈,并设置到2d上下文中

事态栈的用场

相关文章

网站地图xml地图