标签: html5-canvas

我确定之前已经解决了1000次:我得到了一个960*560大小的画布和一个大小为5000*3000的房间,其中应该只画出960*560,这取决于玩家的位置.玩家应该始终位于中间,但是当接近边界时 - 应该计算最佳视图).玩家可以使用WASD或箭头键完全免费移动.并且所有物体都应该自己移动 - 而不是我移动除了玩家之外的所有其他东西以创造玩家移动的幻觉.

我现在发现了这两个问题:

HTML5 - 为画布创建一个视口,但仅适用于此类游戏,我无法重现我的代码.

更改html5画布的视图"中心"似乎更有前途,也更有说服力,但我只是理解它相对于播放器正确绘制所有其他对象而不是如何相对于播放器滚动画布视口,我想要当然要先实现.

我的代码(简化 - 游戏逻辑是单独的):

var canvas = document.getElementById("game");
canvas.tabIndex = 0;
canvas.focus();
var cc = canvas.getContext("2d");

// Define viewports for scrolling inside the canvas

/* Viewport x position */   view_xview = 0;
/* Viewport y position */   view_yview = 0;
/* Viewport width */        view_wview = 960;
/* Viewport height */       view_hview = 560;
/* Sector width */          room_width = 5000;
/* Sector height */         room_height = 3000;

canvas.width …

我想要一个HTML画布上下文,我可以绘制并在屏幕外阅读(在这个例子中,写文本和阅读创建的形状,但这是一个普遍的问题).我可能还想使用画布作为屏幕外帧缓冲.

我想我可以创建一个隐藏的DOM元素,但我宁愿用JavaScript创建它(我可能想在运行时创建和销毁一些画布).

可能？

是否可以使用JavaScript和HTML动态生成图标,使用当前页面的图标作为背景,以及前景中的随机数？

例如,假设当前的favicon看起来与此类似:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X============X====
====X============X====
====XXXXXXXXXXXXXX====
======================

如果可能的话,我怎样才能使用JavaScript和HTML让它看起来与此类似:

======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X=========--111--=
====X=========--1-1--=
====XXXXXXXXXX----1--=
==============--1111-=

地图::
=白色背景
x:原始Favicon图像
-:红色生成的图像,带有数字
1:白色文本

思路:

• 帆布？
• 数据Uri？

我在HTML5中阅读了canvas标签,并且总是看到getContext('2d').
参数是'2d',所以不存在像'3d'这样的另一种可能性吗？
而且,你怎么能用它呢？我之前尝试过3D,但并没有真正理解(由于非解释性教程).任何教程？

我想在将canvas元素编码为jpg时设置质量设置.

var data = myCanvas.toDataURL( "image/jpeg" );

不给我一个高质量的选择.我可以使用替代库吗？

相关:不同浏览器使用的默认质量设置是什么？

是否允许Web工作者访问画布对象？

我想每隔5秒从视频中捕捉一帧.

这是我的JavaScript代码:

video.addEventListener('loadeddata', function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    }, 300);
});

function generateThumbnail(i) {     
    //generate thumbnail URL data
    var context = thecanvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = thecanvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

我遇到的问题是生成的前两个图像是相同的,并且不生成持续时间为5秒的图像.我发现缩略图是在特定时间的视频帧显示在< video>标签之前生成的.

例如,当video.currentTime = 5生成帧0的图像时.然后视频帧跳到5秒.因此,当video.currentTime = 10 …

有没有办法获得上下文用于的画布？

我问的原因是因为我正在创建一个原型函数CanvasRenderingContext2D,我需要画布元素的宽度/高度.

例如:

var cv = document.getElementById('canvas');
var ctx = cv.getContext('2d');
// Using only 'ctx', how to get 'cv'?

我正在接受一项任务,在HTML5中重写以下Flash应用程序:

http://www.docircuits.com/circuit-editor

鉴于应用程序的复杂性和我迄今为止的研发,我已经将AngularJS确定为实现的首选MVC框架.该应用程序有各种部分,如面板,菜单,属性,图表等,我相信所有这些都可以在AngularJS中轻松实现.

然而,关键问题是组件设计和交互(诸如拖放,移动,线处理等)需要基于Canvas,因为我已经能够使用Flash导出所有矢量图形CreateJS工具包(http://www.adobe.com/in/products/flash/flash-to-html5.html)到Canvas库而不是SVG.

问题是在"画布内的单个对象"和AngularJS之间没有明确的通信方式.我查看了以下示例,但几乎所有示例都在canvas对象上工作,而不是处理Canvas中的各个组件:

AngularJS绑定到WebGL/Canvas

是否已经为AngularJS制作了画布绘图指令？

我有点被困在这里,不知道该怎么做.真的很感激一些评论:

• AngularJS是否是正确的选择？

• 我应该尝试在另一个库中实现Canvas部分(例如Fabric.js,kinect.js,Easel.js)并将其与Angular集成(现在这似乎也是一项太大的任务)？

• 如果不是上述内容,我应该切换到哪个其他框架可以轻松处理画布以及面板,菜单,图表等其他功能？

任何使用过three.js的人都可以告诉我是否有可能检测到webgl支持,如果不存在,可以回退到标准的Canvas渲染吗？