Html5 canvas 如何处理Chrome 18小画布限制？
我以前使用的所有画布程序都在Chrome18上显示了死亡黑屏。我曾看到过关于复杂代码的讨论，但即使是在以下情况下，我也能理解： <html><head><title>disaster</title></head><body> <canvas id="canvas" height="257" width="257"></canvas> <script type="application/javas
我以前使用的所有画布程序都在Chrome18上显示了死亡黑屏。我曾看到过关于复杂代码的讨论，但即使是在以下情况下，我也能理解： <html><head><title>disaster</title></head><body> <canvas id="canvas" height="257" width="257"></canvas> <script type="application/javas
我的工具栏上有多个图像，可以在画布上拖放，也可以移动。 我想创建一个名为line的按钮，用kineticjs连接画布上的图像。在按钮的单击事件处理程序中执行此操作： // assumes i1 & i2 are references your images, // this code creates a new line connecting those 2 images var line=new Kinetic.Line({stroke:'black',points:[i1.x()
我想使用上下文弧方法创建画布圆形图像。现在我正在使用下面的代码，它创建了一个完整的圆形图像（左侧图像），但我希望图像的右侧有一个切口（右侧图像） 代码： <div class="cv_prog_bar_round" id="cv_prog_bar_round" data-percent="10"></div> <script> var el = document.getElementById('cv_prog_bar_round');
使用HTML5画布，我基本上画了一个彩色矩形。现在，我正在为同一个矩形绘制一个黑色的宽笔划，但在目标中使用全局复合操作符。我的预期结果是有一个半宽的红色笔划，没有其他任何东西，因为在中通过目的地绘制笔划应该只绘制画布中红色矩形“击中”笔划的部分。。但结果是红色矩形的填充也使其穿过笔划外部 我听错了什么吗？下面是实际使用的代码： var ctx2 = document.getElementById('canvas2').getContext('2d'); ctx2.fillStyle = "re
我有一张地图。我希望用户能够缩放和平移地图。想象一下谷歌地图，它不是无限可平移的，而是一个正方形（如果你越过它的边缘，它就不会再环绕） 我已经使用scale（）和translate（）实现了缩放和平移。这些很好用 我被困在最后一部分——当用户缩放时，我想围绕该点居中缩放。这很难用语言来解释，所以想象一下当你在谷歌地图上鼠标滚轮时会发生什么——这就是我想要的 我已经看过了每一个答案，在标题中有这些术语。大多数是上的变体，基本上说这就是我需要做的： ctx.translate(/* to the p
我用Adobe Animate创建了一个html画布，它在调试模式下运行良好，但如果我在文件系统上发布我的网站，则会出现以下错误： Uncaught TypeError: Cannot read property 'getNumFrames' of undefined 我搜索了一下，发现了 精灵工作表不能从本地文件系统工作 但我想知道这是不是真的，为什么以及如何在文件系统上使用它？您可能没有运行web服务器，而是试图将html作为文件加载到文件系统上。当您运行这样的应用程序时，很多东西都不起作
我是web开发新手，我使用了这两种工具，并应用了基本相同的功能，哪个工具更有效（使用更多，在更积极的开发下），并且具有更有趣的功能HTML Canvas元素或PHP GD库？这实际上取决于您在构建什么。例如，HTML画布可以通过WebGL渲染任何三维图形，而GD库是一个二维图形库（即使您可以在那里伪造三维图形） 另一点是，一个是后端（PHP），另一个是前端（HTML），也就是说，处理是由您的服务器进行的，而不是由用户在用户设备上进行的，这有时可能非常慢 我想说，根据我的经验和最近的发展，PHP
我正在开发一个应用程序，允许用户将文本添加到地图中。我正在使用Openlayersol.style.Text来实现这一点，请参见以下内容： text: new ol.style.Text({ text: "Your text \n on a new line", textAlign: 'left', textBaseline: 'bottom', offsetX: 10, offsetY: -5, scale: 1.5, placement: 'point', f
我正在使用HTML5画布和Konvajs画布库进行类似甘特图的任务显示 将甘特图分解为其组件将使我当前看到如下视图。这里1是任务列表，2是任务栏区域，3是任务栏，4是文本单元格 对于这个问题，我正在寻找构造1和4的代码。要显示的数据将以普通JS对象的形式传递，其中包含嵌套的任务列表，其中每个任务都有一个编号、名称、分配给人名、开始日期、结束日期、持续天数和完成百分比 因此，要求能够构建一个类似电子表格的面板，如甘特图左侧所示 我有一个部分开发了，我将发布作为一个答案。然而，这似乎是一种常见的需
我想在Fabric.JS中的svg文件中显示路径： <g> <path style="fill:none;stroke:#000000;stroke-miterlimit:10;" d="M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72"/> </g> 但结果不一样： 预期： FabricJS中的路径显示与SVG文件中相同。 这
问题: 尝试创建一个布局，如下所示，其中每个部分都可以单击，并且具有单独的实体 尝试过的解决方案及其问题： 用画布创建弧。必须添加带有笔划的圆弧。笔划不可点击。尝试了其他答案的破解，但似乎不起作用 与其用圆弧绘制，不如这样： 使用楔子而不是圆弧 将3个外部形状绘制为楔子，并将它们放在一个图层#1上 将10个内部形状绘制为楔子，并将它们放在第1层上方的第2层上 将中心圆画成一个圆，并将其放在第1层和第2层上方的第3层上 将（“单击”）附着到每个楔块上 分层会给你视觉上的“嵌套”效果 分层可以
我试过在里面使用图像标签。我还尝试过通过将图像直接导入画布。否。所有绘图都必须使用javascript完成。请参考此内容。纯粹好奇……为什么没有javascript？：）这就是我想要的代码结构的阅读方式。如果他们真的这么做了，对我来说将是一个更自然的HTML扩展。您最终将能够使用Web组件的document.register功能扩展或创建您自己的自定义HTML元素。它还没有准备好进入黄金时间，但是现在有几个多边形填充可用，比如：谢谢你的信息标记。
是否可以检测画布元素是否与主页上的任何html冲突？例如，我有一个带有表格、图像和不同按钮的页面。现在我添加了一个画布元素，其中雪粒子掉落 我想通过与画布外的任何元素碰撞来停止像素。这是否可以检测？当然，听起来可行且有趣：我认为解决方案大致可以这样。我假设您正在使用或可以使用jQuery，以获得简洁的解决方案。除此之外，这仍然是可能的，但更为复杂 //Look up all DOM elements that should stop the snowflakes var $elements =
我是画布新手。我想知道我是否可以将Fabric JS画布放在现有Fabric JS画布的时间上？如果是这样，我会这么做 是的，你可以这样做。默认情况下，画布背景是透明的，因此可以将其重叠为层。使用CSS将画布元素精确地放置在彼此的顶部 确保在清除顶部画布时，使用背景色（甚至是白色）的clearRect而不是fillRect，因为这样会移除透明度并隐藏其他画布
我已经为从服务器到javascript客户端的图像传输编写了一个websocket实现 在事件this.webSocket.onmessage的客户端中，我们接收到一个png图像作为base64，我们编写如下来显示 if (bIsPngFormat) { // Draw the image onto canvas using image.onload event var myImage = new Image(); myImage.onload = () => { t
我只是尝试使用以下代码绘制图像： (function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); // resize the canvas to fill browser window dynamically window.addEventListener('resize', resizeCan
我有一个webGL代码来绘制球体，我在旁边添加了文本标签。 我正在做的是创建二维矩形，然后在文本中应用纹理 function createCubeTexture(text) { var canvas = document.createElement('canvas'); canvas.id = "hiddenCanvas"; canvas.width = 512; canvas.height = 128; canvas.style.display = "none"; var bo
我正在尝试将着色器应用于位图，如本文所述 代码如下： var shader = new Shader (); shader.glFragmentSource = "..."; <- this part is not important shader.data.useAlphaImage = [ true ]; shader.data.uAlphaImage.input = alphaBitmapData; bitmap.filters = [ new ShaderFilter (sha
我正在做一个游戏，它开始变得非常图形化。需要绘制很多点、圆弧和渐变。问题是绘制所有这些图形的速度开始变慢。RGBA径向渐变在其他渐变（即背景）之上绘制时似乎需要非常长的时间 如果有某种方法来缓冲图形，那可以在每一帧中为我节省大量计算。根据问题，可以通过在html文档上创建隐藏的html5画布来实现图形缓冲。不幸的是，这将不起作用，因为我需要能够为游戏缓冲未定义数量的图形 有没有办法为html5画布缓冲图形？来自 var renderToCanvas = function (width, heig
下面的代码无法保存图像 我想在画布上画一个点击图像，并想保存另一个保存按钮点击 <head> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"
我有一个HTML5画布，它显示了许多图像。我在画布下方的页面上也有一些简单的HTML标签 当光标悬停在这些图像上时，我想更新标记的内容，我在上找到了一个快速教程：它似乎建议可以教你如何做 但是，我已经学习了教程，当我现在在浏览器中查看我的页面时，我得到一个控制台错误，上面说 getElementByTagName不是函数 我以前没有见过这个函数，我只是想知道它是一个预定义的函数，还是教程的作者自己定义的函数。。。？我在那个页面上看不到作者定义函数的任何内容，所以我认为它可能是预定义的，但我不确定
我是KineticJS的新手，一直在学习教程。我想拍摄一张有“正面”的图像，并将其旋转随机数度，然后使其在新方向上向前移动若干像素/英寸 我可以用它来旋转我的图像 我了解了如何使用Transitiono将图像发送到x/y坐标 我很难把两者联系起来。我觉得我需要随机生成一个新的x/y坐标，然后确定图像指向的位置与从图像中心到新x/y点绘制的线之间的度数差 有人有做这种事情的秘诀吗？如何从一个点画两条线并确定它们之间的角度 提前谢谢 由于余弦定律，您必须计算新的坐标。 一旦你计算了角度，你必须小心，
我有一个例子，其中我有一个父组，在其中，1个矩形用于显示父组和子组的边界，带有圆圈和文本用于标签 我需要的是，当我旋转父组时，我只需要旋转Rect，子组不应该旋转 我尝试的是在rotate函数中，我过滤了如下所示的子组，并给出了相反的结果 this.rotation = function(degrees) { group.rotation(degrees); var childGroup = group.getChildren(fu
我需要的功能，如Photoshop多边形选择工具在HTML5。我尝试使用HTML5路径属性，我可以在画布上画线，但没有逻辑使线连接并进行多边形选择。您可以处理画布上的单击，并将单击坐标放入数组变量中 可以一直将点添加到路径阵列，直到路径完成。当用户在创建3个或更多点后单击第一个点时，路径已完成。您可以使用此应用程序绘制多边形并将其导出，以提供正确的HTML和Javascript画布语句，从而在网页上生成多边形
它是如何工作的？ A.矩形正在层内改变位置？ 或 B层在舞台内的位置发生变化 我画了一个矩形，然后将它拖到另一个地方，并输出rect.getX（）和rect.getY（）。它们始终保持不变（10,10） 如果绘制矩形，然后对要拖动的矩形进行编码，则矩形形状将移动。矩形的x和y值应该更改 你是说情况不是这样？粘贴一些代码以便我们可以查看：）
我正在使用HTML5画布绘制组织结构。每个节点包括一个图像，其URL从数据库中获取。我有一个处理图像加载的小函数，一旦加载，它就会将图像添加到画布中。如下所示（请注意，重要的一点是图像中添加的onload侦听器）： 这非常有效，除了图像在加载完成后随机弹出。看起来很不整洁 我正在寻找一种方法，使这个看起来更平滑。我的第一反应是尝试创建一个淡入效果，但如果不反复重画画布，我想不出如何做到这一点 我曾想过尝试这样的事情： img.onload = function () { var coun
我有一个关于突出显示图像的问题。当我点击图像时，笔划样式必须是可见的，当我将光标移离图像时，笔划样式必须是不可见的。 在这个例子中，你可以计算出来，我可以隐藏锚，但我不能隐藏笔划。提前谢谢你，在不需要时将笔划颜色设置为透明 var anchor = new Kinetic.Circle({ stroke: 'transparent', ... anchor.on('mouseover', function() { this.setStroke
这是three.js动画代码示例： <script defer="defer"> var angularSpeed = 0.2; var lastTime = 0; function animate(){ var time = (new Date()).getTime(); var timeDiff = time - lastTime; var angleChange = angularSpeed * timeDiff * 2 * Math.PI
我需要一个对Cytoscape画布对象及其2D上下文的引用。我该怎么做？我在画布上看不到任何id属性 谢谢您可以通过以下方式获取Cytoscape的画布元素及其上下文 var canvas = document.querySelector('canvas[data-id="layer2-node"]'); var context = canvas.getContext('2d'); 下面是一个例子，展示了如何使用上下文在画布上绘制一些东西 var cy=细胞景观{ 容器：document.g
如何使用FabricJS增加移动设备上控制点的接触面积？因为在移动设备上，它们太小，无法与用户顺畅交互。但不改变控制点的大小（为了更好地观看）。 这是我的代码： 如何增加控制点的交互=视图控制点大小x 2 var canvasObject=document.getElementById（“editorCanvas”）； //将画布设置为与div相等的大小 $（canvasObject）.width（$（“#canvasContainer”）.width（）； $（canvasObject）.
我想用我的平板电脑（HP Elitebook）在网页上画画，我想创建一个可以在网络浏览器中使用的“画图”，如果可能的话，可以使用HTML5画布 我是平板电脑编程新手。。。我只找到了用微软图书馆或QT管理手写笔压力的方法。。。但它不是针对网页的。 我还发现Wacom平板电脑有一些功能（），但它似乎不适用于我的平板电脑 那么，我如何管理网站中的平板电脑输入（尤其是压力）？ 还有，管理平板电脑的最常用和最完善的库（C/C++/Java）是什么？我相信包含压力传感器的触控笔是Watcom在该单元中制造的
我正在尝试制作一个可以通过鼠标操作的画布（拖动、绘制、单击…），这似乎是一个简单的任务。目前，我让它画一条线，从鼠标按下的位置到现在的位置，直到它被释放。但无论我是否清除画布，所有旧版本的线条都会继续绘制。我尝试过使用beginPath/closePath和fill代替stroke；两种方法都导致该行从未出现。有一些。。。我找不到的绘图操作的“分隔符” 源代码可以被查看和测试，我也在下面介绍了它 <!DOCTYPE html> <html> <head>
Fabric.js对我有效，但当我增加画布运行时的高度/宽度时。新添加的动态对象我可以在旧画布区域拖放。但不是在增加的区域 我在div中使用canvas和overflow 如果我在隐藏区域拖动新对象并向下滚动画布，则对象将被锁定 下面是我的HTML代码： <input id="Button1" type="button" value="Circle" onclick="addcricle();" /><input id="Button2" type="butto
考虑一个HTML5游戏，它的资产相当沉重，是否有可能为用户提供一个本地存储资产的选项，以避免每次加载游戏时再次加载所有这些资产 是的，有几个选项： （localStorage/sessionStorage）可用于存储字符串（或字符串化对象）。它的存储容量有限，但使用非常方便 是一个轻型数据库，允许您存储任何类型的对象，包括blob。它有一个默认限制（通常为5 mb），但有一个允许您请求更多存储空间的接口 也是一个数据库，尽管已弃用，但它在例如Safari（不支持索引数据库）中仍然有很好的支持，
我目前正在研究在线手写识别的预处理（请参阅）。输入设备的一个有趣特性是采样率，这意味着我在MouseMove和类似事件上获得的速率 我可以记录它们，看到两个事件之间的时间差在1.00毫秒到700.00毫秒之间变化，但平均为27.34毫秒 （采样率以点/秒为单位。因此，对于平均情况，采样率应为或） 是否有可能直接从客户处获取此信息？是否有已知采样率的设备？Javascript如何在内部决定触发这些事件的频率？“事件触发率”是否可以增加/减少？特定浏览器的Mousemove触发率在足够的样本大小上是
我一直在努力解决这个问题 我正在创建一个个人网站，我正在使用动画画布元素作为背景（通过jquery设置动画）。问题似乎是hover上锚定标记的文本和框阴影导致canvas元素显示一个垂直滚动条，而这只发生在Chrome中 如果我删除了文本框阴影，或者如果我删除了画布元素，那么问题就消失了。我尝试过添加溢出：几乎所有内容都隐藏，但没有效果 请参见我的网站： 提前谢谢 编辑： 使用windows 7 ultimate和Chrome版本36.0.1985.125 m。它会在浏览器滚动条旁边创建第二个垂
我是HTML5画布的新手，在这里搜索了一些顶级网站和其他关于这个问题的问题。我想做的就是在我正在练习的自定义形状云上创建一个清晰的0像素笔划 但这可能吗？根据我目前的代码，我的云在谷歌浏览器中有一个迷你黑色轮廓。 我该如何解决这个问题 <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanv
如何将onclick事件绑定到piechart段 饼图部分实际上是一个楔子。你有几种方法来测试楔子 一种方法是数学方法： 测试鼠标是否在楔块创建的圆的半径范围内 如果半径测试为真，则计算鼠标相对于圆中心点的角度 将该角度与每个楔块进行比较。如果角度介于特定楔体圆弧的起始角度和结束角度之间，则鼠标位于该楔体内部 另一种方法是使用canvas的内置路径命中测试方法：isPointInPath 重新定义一个楔子。实际上没有必要去敲打或填补这个楔子。只需执行从beginPath到closePath
二维画布提供了一个名为draw image的api： 绘图图像（img、sx、sy、swidth、sheigh、x、y、宽度、高度）； 其中sx是图像剪辑开始的位置 , 我正在尝试使用webgl使用texImage2D渲染2D图像。我想检查是否有办法使用webgl实现剪辑 我正在使用以下教程使用webgl渲染2d图像。 原始图像： 使用drawImage进行剪裁（2D）： 使用webgl进行剪辑： var-gl、程序、位置、原始图像纹理、画布； var x=10； 变量y=20； 函数
我正在尝试根据鼠标事件生成一个图形，我注意到一些有趣的渲染行为，我无法解释为什么会这样。下面是一个jsbin，它显示了这个示例： Konva免费绘图演示 身体{ 保证金：0； 填充：0； 溢出：隐藏； 背景色：#f0； } 工具： 刷子 橡皮擦 变量宽度=window.innerWidth； 变量高度=window.innerHeight-25； //首先，我们需要Konva的核心产品：舞台和舞台 var阶段=新Konva.阶段({ 容器：'容器'， 宽度：宽度， 高度：高度 }); var
我想知道这是否可能，或者这两个库是否相互冲突。以及是否可以在同一画布上同时显示Fabric JS对象和Vis JS网络 我走了多远： 目前我正在使用visjs的“Network”组件，它会在指定的中自动生成元素 我正试图让Fabric JS与Vis JS一起工作，这样我就可以充分利用这两个库。理论上，如果在初始化Fabric JS时指定了Vis JS生成的元素，Fabric JS应该可以工作 然而，当我尝试这样做时，Vis JS网络被渲染，但它无法与之交互，也无法看到Fabric JS对象。Fa
我在画布上画不同颜色的正方形，大小固定为50px x 50px 我已经成功地为这些彩色方块添加了一个5px的透明内部笔划，但我这样做似乎有点过分了 ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, engine.cellSize, engine.cellSize); ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.fillRect(this.x, this.y, engine.cellSize,
我正在使用库从一个div中获取图像。该div包含图像的集合。所有图像均为300 dpi，但html2canvas的输出为72 dpi。 有什么方法可以在html2canvas的输出中保持300 dpi的图像质量 html2canvas（$（“#拼贴预览框”）{ onrendered：函数（画布）{ cartImage=canvas.toDataURL（“image/png”，1）； $（“#图像显示”）.attr（'src'，cartImage）； $（'.loader'）.remove（）；
我正在尝试将图像从一个画布复制到另一个画布。我看到一个答案说，一个简单的方法是： var Scanvas = $("#sourceCanvas"); var Scontext = Scanvas.get(0).getContext("2d"); var Dcanvas = $("#destinationCanvas"); var Dcontext = Scanvas.get(0).getContext("2d"); //draw something in Scanvas Dcontex
我想有一个魔术类型卡的模板（但有一个不规则形状的艺术部分），用户可以上传自己的图像，并拖动它来放置它，但模板仍将在前景中。我知道，在EaselJS库中，默认情况下，点击的“命中区域”（触发点击和拖动等操作）仅为可见像素，因此您可以“穿过”PNG的透明部分并拖动其下的元素。所以我在寻找类似KineticJS的东西。我该怎么做呢？想出来了。这就是我要找的
编辑：哦这个问题的主体大部分是不相关的，因为我发现了我愚蠢的错误，那就是我的画布在计时器上被重新绘制，而我没有在绘制之间清除画布。这会使任何半透明区域变暗至完全不透明度 现在正在做： mainContext.clearRect ( 0 , 0 , 320 , 480 ); 在每帧绘制之前 一个仍然存在的小谜团是，为什么在一个物体上画很多次也会使原本完全不透明的图像区域变暗/饱和 编辑：我添加了一张图片。底部区域显示加载到元素中的图像（该元素仅显示图像在绘制程序中的外观）。（可以下载img。我
我尝试在画布上使用谷歌网页字体。我用jsfiddle试过了，效果很好 当我把它添加到我的html并上传到我的网站时，它就不起作用了 github要点：。奇怪的是，当您从地址栏按键盘上的return键时，它似乎可以工作，但一旦重新加载，它就无法工作。因此，您应该尝试将其导入样式表，并强制样式表将字体应用于画布
我正在处理KineticJS（最新版本），我对更改drawFunc（）形状对象绘制的文本颜色有疑问 1） 这是Shpae对象的代码 var sampleText = new Kinetic.Shape({ x:380, y:700, drawFunc: function(context) { context.beginPath(); var x = 0; var y = 0; var text = 'S
我正在寻找一种方法来擦除画布上的画线，而不必擦除我的背景图像 当我尝试使用白色时，图像上出现了白线。 我曾想过制作透明的线条，但我认为这是不可能的 使用toDataURL（）保存画布时，我希望使用背景保存图形 这是我设置背景图像的方式： var background = new Image(); background.src = "pizza.png"; background.onload = function(){ context.drawImage(background,0,0); }
在我的项目中，我显示了一个视频。在视频的顶部有一个画布，其中绘制了一些对象。因此，视频上覆盖了一些图形。现在我想下载视频文件，包括图纸。 我正在使用webrtc mediaRecorder。 我正在将视频绘制到window.requestAnimationFrame上的画布上。我导出的视频看起来不错，但视频中没有音频，因为我捕获了画布。是否可以从视频中捕获音频并将其添加到画布流？ 我还录制了视频流，包括音频，但我没有在上面画我的画。有什么建议吗？您需要使用输入流音频曲目和画布视频曲目创建新的Me