HTML5 Canvas【所見===所得】編程工具正式發布

+ -

 

 

 

 

 

 

 

 

 

 

 

 

使用指南

基本使用：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

拷貝至編輯器並修改代碼試一試！！

動畫支持：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cyc = 100;
ctx.fillStyle = "#000";
var loadingPosition = new Vector2(200, 200);
var loadingRadius = 50;
var intervalAngle = 45;
var bigCircleRadius = 8;
var bigCirclePosition = new Vector2(200, 150);
function drawLoading() {
    for (var i = 0; i < 11; i++) {
        ctx.beginPath();
        ctx.arc(bigCirclePosition.x, bigCirclePosition.y, bigCircleRadius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
        bigCircleRadius -= 1;
        bigCirclePosition.rotateSelf(loadingPosition, 30);
    }
}
CANVASLOOP=setInterval(function () {
    bigCircleRadius = 10;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawLoading();
}, 50);

拷貝至編輯器並修改代碼試一試！！

這里值得注意的是，我約定好了loop的名稱叫做：CANVASLOOP。一定要使用CANVASLOOP,不然的話在IE下會出現loop疊加混亂的問題。

代碼支持縮放功能(重新打開瀏覽器會記住上一次的font-size)！試一試右上角的+號和-號！！!要獲得很好的體驗，請在瀏覽器F11全屏模式調試編輯代碼。

HAVE FUN!!

Happy Fun Coding!