HTML5 Canvas【所见===所得】编程工具正式发布
2012-03-28 08:28 【当耐特】 阅读(11387) 评论(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全屏模式调试编辑代码。
HAVE FUN!!
Happy Fun Coding!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂