绘图高级篇 复杂位图

    刚才介绍的是如何使用Canvas标签以及JavaScript API绘制矩形与半圆。其中，绘制矩形最为简单，由于涉及到曲线路径，半圆的绘制稍微复杂一点。接下来，我们介绍另一个高级概念绘画状态（Drawing state）。绘画状态反映了渲染上下文当前的瞬时状态，Web开发人员可以通过对绘画状态的保存与恢复操作而快速的回到之前使用的各种属性和变形操作。

    下面，我们演示如何在网页上使用平移/旋转变形方法绘制复杂位图。代码部分如下：

    !DOCTYPE HTML>

    html>

    body>

    canvas >您的浏览器不支持Canvas!

    script type=text/javascript>

    ctx.translate（150,150）；

    for （i=1;i2;i++）{

    if （（i % 2） == 1） {

    ctx.fillStyle = #00f;

    } else {

    ctx.fillStyle = #f00;

    ctx.save（）；

    for （j=0;ji*6;j++）{

    ctx.rotate（Math.PI/（3*i））；

    ctx.beginPath（）；

    ctx.arc（0,20*i,5,0,Math.PI*2,true）；

    ctx.fill（）；

    ctx.restore（）；

    script>

    body>

    html>

    其中，开发人员可以使用save和restore两种方法分别保存和恢复Canvas状态。实际上，维护绘画状态的结构可以认为是一个栈，而save与restore方法则相当于push与pull方法。每调用save方法，都会将当前状态压入堆栈中，而相应的restore方法则会从堆栈中弹出一个状态，并将当前画面恢复至该状态。

    ctx.save（）；

    ctx.restore（）；

    作为一种常见操作，translate方法用于支持二维绘图的平移，rotate方法支持二维绘图的旋转。类似地，scare方法支持二维绘图的伸缩。

    最后的效果图：
 

    总结

    本文对HTML5新引入的Canvas标签在Web绘图中所扮演的角色和所发挥的作用做了最基本的介绍，其中包括使用Canvas以及相关API完成基本的 矩形，半圆，位图。与Flash等绘图技术相比，Canvas是一种不依赖任何插件的标准Web像素级绘图技术。随着各大浏览器厂商的加入，Canvas势必会更加成熟完善，也会有更多基于Canvas的绘图类应用不断涌现。

（责编：sunnie）

声明：凡注明CIO时代网（）之作品（文字、图片、图表），转载请务必注明出处为CIO时代网（），违者本网将依法追究责任。