代码改变世界

HTML5 Canvas【所见===所得】编程工具正式发布

2012-03-28 08:28  【当耐特】  阅读(11386)  评论(41)  编辑  收藏  举报
+ -

 

 

 

 

 

 

 

 

 

 

 

 

使用指南

基本使用：

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全屏模式调试编辑代码。



image



HAVE FUN!!









Happy Fun Coding!