使用 > 缩放和平移 HTML5 画布的最佳实践10k 个对象
我需要在画布中构建一种地图，它显示超过 10.000 个元素(圆圈)并且需要缩放和平移.我在这里描述了我的方法 Android调整多个画布元素的大小和移动速度明显变慢，并根据评论中的建议更改了我的实现. 现在在画布上下文中使用 setTransform 平移地图，然后在删除画布后重新绘制视口中的所有元素.(我将它们从 R-Tree 中取出).这发生在每个 mousemove 事件上.
..
canvas相关内容
html5画布中的运动jpeg
我正在尝试将运动 jpeg (mjpeg) 流(来自网络摄像头)包装到 html5 画布中.我知道 Safari 和 Chrome 对 mjpeg 具有原生支持，因此我可以将其放入 img 以使其工作.我想将它包裹在画布中的原因是我想对其进行一些后期处理. 我知道我可以使用 drawImage 来加载图像(和 mjpeg):
..
GWT:如何移除 Canvas Widget 的焦点指示器?
我使用以下方法创建了一个画布: Canvas canvas = Canvas.createIfSupported(); 并通过以下方式将其添加到 DOM: RootPanel.get("canvasContainer").add(canvas); 当我在 Chrome 中打开页面并单击它时，它会以橙色焦点边框突出显示.在 Android 浏览器中，当触摸画布时，整个画布会以半透明的蓝色叠加
..
在带有背景的画布上书写文本
是否可以在画布上写图像并用背景写文本?比如这样: 解决方案 文本在画布中的工作原理 很遗憾，您不能使用 text 方法生成带背景的文本 - 只能填充或勾勒文本本身. 这是因为字体(字体)中的字形会根据需要转换为单独的形状或路径，其背景将是字形本身的内部部分(使用填充时看到的部分).除了使用其几何位置之外，字形使用的黑盒(字形适合的矩形)没有层，因此我们需要自己提供一种黑盒和轴承
..
使用没有服务器端代码的 javascript 将 html 文本渲染为位图
我需要使用 javascript 代码来转换文章，html 中的帖子以位图的形式显示给最终用户，有没有办法做到这一点，无需服务器端代码? 示例:
在这里测试文本....
解决方案 您可以使用例如 html2canvas 来将您的页面转换为位图. 如果您的 HTML 不包含任何外部引用，您也可以使用我的以下函数: /*** 画布扩展:drawHTMLText(tx
..
如何在画布中填充图案并沿形状弯曲?
我有一张这样的图像 我想用这样的图案填充 得到这样的结果 . 我可以使用以下代码填充图案，但我不知道如何沿着衣领形状正确弯曲图案，因为它应该看起来像真的，但我的结果变成了这样.. 这是我的示例脚本 $(function(){drawCanvas("body","collar","images/collar.png", 180);函数drawCanvas(overlayType，can
..
在画布中制作可点击区域以更改图像
请帮帮我: 在下面的画布中创建可点击区域，我可以将 onmousedown= 事件分配给这些区域.我知道如何用不可见的 DIV 做到这一点，但我认为有一种更优雅的方式可以在我不知道的画布中做到这一点. 当我单击其中一个区域时，想要将图像名称传递给函数，以便它将正在显示的图像更改为另一个图像，然后将其更改回 onmouseup. 如果您只给我展示一个区域和一个 mousedown/
..
HTML5 画布调整为父级
(“全屏")还是一些
例如.这是我的尝试: //在每一帧调用函数更新(){var canvasNode = document.getElementById('mycanvas');canvasNode.width = canvasNode.parentNode.clientWidth;canvasNode.height =
..
如何在 html5 画布中制作可点击点?
我正在玩 简单教程 用于在 HTML5 画布中绘制线条.因为它是基于jQuery的，所以很容易给绘图添加很多效果. 如何使点可单击/悬停以在单击/悬停时添加 jquery 效果(mouseenter/mouseleave)?点是由 c.fillStyle = '#333';for(var i = 0; i
..
向控件添加自定义删除(后退、前移)按钮
我想知道是否有一种简单的方法可以添加删除、放在前面、放在后面将函数添加到现有的 fabric.js 对象控件中. 目前我只能点击删除对象、放在前面等按钮. 我正在努力寻找能够在对象上按 X(右上角)并删除该对象的解决方案. 我猜这与覆盖、包装或继承现有的控件对象有关. 也许我已经监督了一些事情并且有一个简单的解决方案?请不要使用 Div Wrapper. 解决方案
..
使用 HTML5 的画布绘制带有外部笔划的文本
我目前正在使用 HTML5 的画布使用 fillText 方法来呈现多个字符串.这很好用，但我也想给每个字符串一个 1px 黑色外笔划.不幸的是，strokeText 函数似乎应用了内部笔划.为了解决这个问题，我编写了一个 drawStrokedText 函数来实现我想要的效果.不幸的是，它太慢了(原因很明显). 有没有一种快速、跨浏览器的方法可以使用原生画布功能实现 1 像素的外部笔划?
..
在 Javascript 中将 Base64 数据转换并插入到 Canvas
我得到一个数据缓冲区，代表 Base64 中的图像.我得到的数据(以base64表示图像)(部分数据) 193,1181,25,21,211 ,111111,211,2111111111111111111111111111118.11111111111151515151584,103,136,198,74,212,41,171,203,188,187,69,121,183,255,0,7,7
..
缩放和平移画布后鼠标坐标不匹配
我对 javascript 和 canvas 非常陌生，我有一个程序可以检测椭圆路径上的动画元素.它稍后会形成一棵树.但这是我链接到 jsfiddle 的基本结构.它可以在没有缩放或平移的情况下正常工作，但是一旦我尝试缩放或平移，鼠标坐标就会变得混乱.我尝试遵循 HTML5 画布在缩放和翻译后获取坐标但我肯定做错了什么，我显然不明白画布和转换矩阵发生了什么.我花了大约 3 天的时间试图改变我能想到
..
将 HTML 画布缩放到浏览器窗口大小，但不缩放画布内的元素
有没有办法将 HTML 画布缩放到浏览器窗口的宽度/高度，但不缩放其中的内容?假设我正在创建 Asteroids 并想使用整个浏览器窗口，但不希望在我调整窗口大小时让岩石和船按比例放大/缩小. 解决方案 不要使用 CSS 来缩放画布.这将放大/缩小画布中的像素. 相反，观察适当元素(例如窗口)上的 resize 事件，然后更改 .width 和 .height 属性.这将改变您绘
..
画布绘制图像缩放
我正在尝试按比例缩放图像到画布.我可以用固定的宽度和高度来缩放它: context.drawImage(imageObj, 0, 0, 100, 100) 但我只想调整宽度并按比例调整高度.类似于以下内容: context.drawImage(imageObj, 0, 0, 100, auto) 我到处寻找我能想到的地方，但还没有看到这是否可能. 解决方案 context.draw
..
使用 HTML5 画布生成动画 GIF
他们有图书馆可以这样做吗? 任何浏览器都不支持 AFAIK dataToURL('image/gif') 解决方案 Canvas 无法生成(动画)GIF.您需要使用 JavaScript 库来执行此操作. 有 jsgif，一个用于生成动画 GIF 的 JS 库:http://github.com/antimatter15/jsgif 这篇博文解释了用法:http://an
..
用 html 绘制数据
目标是每隔几秒更新一次且不需要刷新页面的折线图(它将从服务器上更新的单独文件中获取信息).是否有任何 JavaScript 库(JQuery 除外)可以使这变得容易?谁能在网页上展示一个示例? 数据以固定的时间间隔更新.如果可能的话，最好只使用 CSS HTML5 和 javascript. 解决方案 有几个图表库可以使用:gRaphael、Highcharts 和其他人提到的那个.
..
HTML5 Canvas 文本围绕圆圈制作动画
更新了代码有什么问题?我知道它不旋转，但为什么文字是扭曲的. 有谁知道为什么我正在努力解决这个问题 function showCircularNameRotating(string, startAngle, endAngle){//context.clearRect(0, 0, canvas.width, canvas.height);context.font = '32pt 无衬线';c
..
是否可以在 WebGL 内容上绘制透明画布?
我习惯了 Flash，我可以在 Stage3D (OpenGL) 上结合旧的 2D API. 现在我想在我的 UI 中使用与 Flash 2D API 非常相似的 EaselJS，但我希望将它over 3D 绘制内容. 现在，AFAIK EaselJS 是基于 Canvas 的.是否有可能以某种方式通过 WebGL 结合 Canvas?还是需要严重的黑客攻击? 解决方案 Web
..
JavaScript HTML5-Canvas - 使用 SetInterval 绘制弧会导致锯齿状边缘
我正在尝试绘制一个圆环图，到目前为止我已经成功了.问题是，当尝试通过将 stroke() 与 setInterval() 组合来为弧设置动画时，它可以工作，但看起来并不平滑，并且会产生锯齿状的边缘.我尝试在动画完成后使用 clearRect() 清除画布并重新添加动画的最终版本，但我一定是使用 clearRect() 错误，因为它什么也没做.如果您对如何使它看起来更好有任何想法，我将不胜感激.
..