标签: canvas
不支持检测HTML5 <canvas>的最佳方法
处理浏览器不支持HTML5 <canvas>标记的情况的标准方法是嵌入一些后备内容,如:
<canvas>Your browser doesn't support "canvas".</canvas>
但页面的其余部分保持不变,这可能是不恰当或误导的.我想要一些检测画布不支持的方法,以便我可以相应地呈现我的页面的其余部分.你会推荐什么？
javascript html5 canvas progressive-enhancement graceful-degradation
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何使用canvas.toDataURL()将画布保存为图像？
我目前正在构建一个HTML5网络应用程序/ Phonegap本机应用程序,我似乎无法弄清楚如何将我的画布保存为图像canvas.toDataURL().有人可以帮帮我吗？
这是代码,它有什么问题？
//我的画布名为"canvasSignature"
JavaScript的:
function putImage()
{
var canvas1 = document.getElementById("canvasSignature");
if (canvas1.getContext) {
var ctx = canvas1.getContext("2d");
var myImage = canvas1.toDataURL("image/png");
}
var imageElement = document.getElementById("MyPix");
imageElement.src = myImage;
}
HTML5:
<div id="createPNGButton">
<button onclick="putImage()">Save as Image</button>
</div>
推荐指数
解决办法
查看次数
缩放<canvas>时禁用插值
注意:这与放大时现有画布元素的渲染方式有关,而与线条或图形在画布表面上的渲染方式无关.换句话说,这与缩放元素的插值有关,而与在画布上绘制的图形的抗锯齿无关.我不关心浏览器如何绘制线条; 我在乎的浏览器如何呈现canvas元素本身,当它被放大.
是否有画布属性或浏览器设置我可以通过编程方式更改以在缩放<canvas>元素时禁用插值？跨浏览器解决方案是理想的,但不是必需的; 基于Webkit的浏览器是我的主要目标.表现非常重要.
这个问题最相似,但没有充分说明问题.对于它的价值,我试图image-rendering: -webkit-optimize-contrast无济于事.
该应用程序将是一个用HTML5 + JS编写的"复古"8位风格的游戏,以明确我需要的东西.
为了说明,这是一个例子.(现场版)
假设我有一个21x21画布......
<canvas id='b' width='21' height='21'></canvas>
...有css使元素大5倍(105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
我在画布上绘制一个简单的'X',如下所示:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});
左边的图像是Chromium(14.0)渲染的图像.右边的图像是我想要的(手绘为了说明目的).
推荐指数
解决办法
查看次数
如何在本地将一个画布的内容复制到另一个画布
我想复制一个画布的所有内容并将它们转移到客户端的所有内容.我认为我会使用canvas.toDataURL()和context.drawImage()方法来实现这个,但我遇到了一些问题.
我的解决方案是将其Canvas.toDataURL()存储在Javascript中的Image对象中,然后使用该context.drawImage()方法将其放回.
但是,我相信该toDataURL方法返回一个64位编码标签,并"data:image/png;base64,"附加前缀.这似乎不是一个有效的标签,(我总是可以使用一些RegEx来删除它),但是这个64位编码的字符串在"data:image/png;base64,"子字符串后面是一个有效的图像吗？我可以说image.src=iVBORw...ASASDAS,并在画布上画回来吗？
我已经看了一些相关的问题: 使用base64将画布图像从一个画布显示到另一个画布
但解决方案似乎不正确.
推荐指数
解决办法
查看次数
如何向canvas元素添加一个简单的onClick事件处理程序？
我是一名经验丰富的Java程序员,但我在大约十年来第一次看到一些JavaScript/HTML5的东西.我完全不知道应该是最简单的事情.
作为一个例子,我只想绘制一些东西并为其添加一个事件处理程序.我确定我做了一些愚蠢的事情,但我已经搜索了所有内容并且没有任何建议(例如,这个问题的答案: 添加onclick属性以使用JavaScript输入).我正在使用Firefox 10.0.1.我的代码如下.您将看到几条注释行,并在每一行的末尾是对(或什么不)发生的描述.
这里的语法是什么？我要疯了!
<html>
<body>
<canvas id="myCanvas" width="300" height="150"/>
<script language="JavaScript">
var elem = document.getElementById('myCanvas');
// elem.onClick = alert("hello world"); - displays alert without clicking
// elem.onClick = alert('hello world'); - displays alert without clicking
// elem.onClick = "alert('hello world!')"; - does nothing, even with clicking
// elem.onClick = function() { alert('hello world!'); }; - does nothing
// elem.onClick = function() { alert("hello world!"); }; - does nothing
var context = elem.getContext('2d');
context.fillStyle = '#05EFFF';
context.fillRect(0, 0, …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何使用javascript HTML5画布通过N个点绘制平滑曲线？
对于绘图应用程序,我将鼠标移动坐标保存到数组,然后使用lineTo绘制它们.生成的线条不平滑.如何在所有聚集点之间生成单条曲线？
我用谷歌搜索但我只找到了3个绘制线的函数:对于2个样本点,只需使用lineTo.对于3个样本点,quadraticCurveTo,对于4个样本点,bezierCurveTo.
(我尝试在阵列中每4个点绘制一个bezierCurveTo,但这会导致每4个采样点扭结,而不是连续的平滑曲线.)
如何编写一个函数来绘制一个包含5个样本点的平滑曲线？
推荐指数
解决办法
查看次数
在HTML5画布上绘制SVG文件
是否有将SVG文件绘制到HTML5画布上的默认方式？谷歌浏览器支持将SVG加载为图像(并简单地使用drawImage),但开发人员控制台确实警告过resource interpreted as image but transferred with MIME type image/svg+xml.
我知道有可能将SVG转换为canvas命令(比如这个问题),但我希望不需要.我不关心旧的浏览器(所以如果FireFox 4和IE 9支持某些东西,那就足够了).
推荐指数
解决办法
查看次数
快速响应的交互式图表/图表:SVG,Canvas,其他？
我正在尝试选择合适的技术来更新项目,该项目基本上可以在可缩放的可缩放图形中渲染数千个点.使用Protovis的当前实现表现不佳.看看这里:
http://www.planethunters.org/classify
完全缩小时大约有2000个点.尝试使用底部的手柄放大一点,然后拖动它以平移.除非你有一台真正快速的计算机,否则你会发现它非常不稳定,你的CPU使用率可能在一个核心上达到100%.对焦点区域的每次更改都会调用重绘为protovis,这种方法非常慢,并且绘制的点数越多越差.
我想对界面进行一些更新,以及更改底层可视化技术,以便更灵敏地进行动画和交互.从下面的文章看,似乎是在另一个基于SVG的库或基于画布的库之间进行选择:
http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/
d3.js,源自Protovis,基于SVG,应该更好地渲染动画.但是,我怀疑它有多好,它的性能上限是多少.出于这个原因,我也在考虑使用像KineticJS这样的基于画布的库进行更彻底的改造.然而,在我使用一种或另一种方法之前,我想听听那些使用这么多数据做过类似Web应用程序并得到他们意见的人.
最重要的是性能,第二个重点是易于添加其他交互功能和编程动画.一次可能不会超过2000个点,每个点上的误差小.放大,缩小和平移需要顺利进行.如果最新的SVG库在这方面还不错,那么使用d3的方便性可能会超过KineticJS的增加设置等.但是如果使用画布有巨大的性能优势,特别是对于计算机速度较慢的人来说,那么我肯定会喜欢这样.
使用SVG的纽约时报制作的应用程序示例,但仍然可以顺利地动画:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html .如果我可以获得该性能而不必编写自己的画布绘图代码,我可能会选择SVG.
我注意到一些用户使用了混合的d3.js操作和画布渲染.但是,我无法在网上找到很多关于此的文档或与该帖子的OP联系.如果有人有任何使用DOM-to-Canvas(演示,代码)实现的经验,我也想听听你的意见.它似乎是一个很好的混合体,能够操纵数据和自定义控制如何渲染它(以及因此性能),但我想知道是否必须将所有内容加载到DOM仍然会减慢速度.
我知道有一些类似于这个问题的现有问题,但它们都没有提出同样的问题.谢谢你的帮助.
后续行动:我最终使用的实现是https://github.com/zooniverse/LightCurves
推荐指数
解决办法
查看次数