canvas 在 actionscript 和 html5 中的绘图应用及问题探讨

我为啥会迷上Canvas？还得从那次转角遇到它说起。当时在网上瞎逛，看见有人用Canvas做了个炫酷的动画，觉得这东西挺好玩。Canvas就像一张白纸，让人可以随便涂鸦，这感觉超爽！

Canvas的魅力：一个空白画布的无限可能

Canvas在HTML5里就像是个游乐场，随便你怎么涂鸦都行。那种用彩笔画画的感觉就跟我们小时候似的，特别愉快。Canvas可以帮你轻松搞定直线、正方形、圆这些图形，学会基础技巧后就能画出各种炫目的特效！

Canvas真的挺好用的，画游戏，动漫，图表什么的都行。想怎么画就怎么画，特棒！还记得第一次用canvas画出小动画那个感觉，实在是没法描述。它给我一种，好像有把神奇的笔画图的感觉，让我在网页上任性创作耶。

绘图指令的存储：一个数组或类的妙用

要在Canvas上画出好多图形，得记下每幅图的画法才行。其实就像画师先想好图怎么布置，再照葫芦画瓢往纸上画一样。咱可以用数组或类来记这些画法，比如说怎么画直线、方框、圆形之类的。

function LGraphics(){  
    var self = this;  
    self.type = "LGraphics";  
    self.color = "#000000";  
    self.i = 0;  
    self.alpha = 1;  
    self.setList = new Array();  
    self.showList = new Array();  
}  
LGraphics.prototype = {  
    show:function (){  
        var self = this;  
        if(self.setList.length == 0)return;  
        //绘图  
    }  
}

我搞了个叫LGraphics的东西，主要是用来画图的。这个类里有各种画图的命令，还有个展示方法。画图的时候，我就把这些命令丢给setList，最后再用show方法画出来。这样子做，画图的流程就清楚多了，想什么时候画就可以什么时候画，感觉自己像个指挥家似的在操纵这支看不见的乐队，画出漂亮的图形。

刷新页面与绘图：持续更新的视觉盛宴

上网页看东西，页面总是要刷新的，这样才能让你看得舒服。如果要用Graphics画图的话，那得不停地更新图画，才能让它更有动感。就好像在看一场没完没了的大戏，眼花缭乱。

drawLine:function (thickness,lineColor,pointArray){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);  
            LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.closePath();  
            LGlobal.canvas.stroke();  
        });  
    },  
    drawRect:function (thickness,lineColor,pointArray,isfill,color){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);  
            if(isfill){  
                LGlobal.canvas.fillStyle = color;  
                LGlobal.canvas.fill();  
            }  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.stroke();  
        });  
        self.showList.push({type:"rect",value:pointArray});  
    },  
    drawArc:function(thickness,lineColor,pointArray,isfill,color){  
        var self = this;  
        self.setList.push(function(){  
            LGlobal.canvas.beginPath();  
            LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);  
            if(isfill){  
                LGlobal.canvas.fillStyle = color;  
                LGlobal.canvas.fill();  
            }  
            LGlobal.canvas.lineWidth = thickness;  
            LGlobal.canvas.strokeStyle = lineColor;  
            LGlobal.canvas.stroke();  
        });  
        self.showList.push({type:"arc",value:pointArray});  
    }

为让效果更好看，我给LGraphics加了个ismouseon方法，用来判断鼠标有没有在画出来的地方瞎戳。这一招就能让咱们随心所欲地操控图形显示或消失，玩儿得更溜儿了！这种即刻可见的效果真的让人感觉自己像个魔术大师，轻轻一点，就能把世界都变了个模样。

绘图指令的妙用：函数式编程的精髓

没想到，我就是在用函数式编程！整了个LGraphics类存一堆画图的命令，想画啥就找对应的那条儿用就行了，不用每次都得敲那些一样的代码。这种方法可真好用，就跟变魔术似的，原本挺费劲的事儿现在变简单了，心情也跟着好了起来。

函数随传参多样，能搞出各种图案，感觉像玩魔术似的。给函数加什么操作就能变出啥样图形，这就是函数式编程的魅力所在，让画图成了一种享受。

交互式体验：让用户也成为创作者

show:function (){  
    var self = this;  
    if(self.setList.length == 0)return;  
    var key;  
    for(key in self.setList){  
        self.setList[key]();  
    }  
}

Canvas不只是那个安静的画布，还能做出各种炫酷的互动特效。看，我们用鼠标控制图形的开合，甚至让它跟着鼠标变形。这可是让我感觉自己像个游戏大咖，设计了一款既惊艳又好玩的游戏！

为方便大家参与作图，我给LGraphics类添了个新功能——那个脚本ismouseon。它能检测你的鼠标有没有点到画布上，这样一来，用鼠标就能掌控图形的呈现与消失，实际观感更独特。这种互动体验让我觉得自己仿佛是位导播一样，带着大家一同探索神奇的绘图世界。

backLayer = new LSprite();  
    addChild(backLayer);  
    //画一圆  
    backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");  
    //画一个矩形  
        backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");  
    //画一条线  
    backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);

总结与展望：Canvas绘图的未来

经过这阵子学和练，我已经摸清了Canvas绘图是个啥玩意儿。Canvas就是那个能让我随心所欲在网页上画各种漂亮东西的神秘画板。随着技术的进步，Canvas肯定会越来越流行的。

朋友们，你们有没有试过用Canvas画画？如果你也喜欢，那就去试一试。亲自去绘画后，你会发现Canvas真的很神奇，魅力无法挡。所以，让我们一起来玩Canvas，释放创意的无限可能！

ismouseon:function(event,cood){  
        var self = this;  
        var key;  
        for(key in self.showList){  
            if(self.showList[key].type == "rect"){  
                if(event.offsetX >= self.showList[key].value[0] + cood.x && 
                event.offsetX = self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){  
                    return true;  
                }  
            }else if(self.showList[key].type == "arc"){  
                var xl = self.showList[key].value[0] + cood.x - event.offsetX;  
                var yl = self.showList[key].value[1] + cood.y - event.offsetY;  
                return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];  
            }  
        }  
          
        return false;  
    }