使用画布获取转换后的坐标
如果我在画布上使用 translate/rotate 之类的转换函数，那么当传递给任何画布函数时，所有点都会被转换.这就像一个魅力，但还有一种方法可以在不实际绘制的情况下简单地获取转换点? 这在调试时非常有用.我现在所能做的就是查看该点的最终位置，但我似乎无法获得计算出的转换坐标. 所以，假设我旋转 90 度，是否有任何函数可以获取一个点(即 (10, 0))并将转换后的点返回(即 (
..
html5-canvas相关内容
如何使用 Fabric.js 自由绘制圆圈?
我正在使用 FabricJS 在画布上画圆: var circle = new fabric.Circle({radius: 100,充满: ''，中风:'红色'，行程宽度:3，originX: '中心',originY: '中心'});var text = new fabric.Text('HELLO WORLD.',{字体大小:30，originX: '中心',originY: '中心',填
..
如何为 HTML5 画布注册 onkeydown 事件
我想用 HTML5 元素编写一个蛇游戏演示.我尝试注册 Keyboard(onkeydown) 事件，但它不起作用. 代码: canvas.onkeydown = 转向；//不工作//canvas.addEventListener("keydown", divertDirection, false);//不工作//根据键盘来调振蛇移动的方向功能转移方向(EV){控制台.
..
HTML Canvas:同时绘制多个 getContext
我正在使用 websockets 构建一个工具，它允许多个用户在彼此的画布上“绘图".用户在画布上绘图，包含 mousedown/mouseup 事件和坐标的对象会立即推送给其他用户.然后将其绘制在他们的画布上，从而产生多个用户在同一位置绘图的效果. 它的工作原理与描述的一样:您可以观看某人绘制一些东西，然后绘制一些将出现在他们的画布中的东西.当您与其他人同时绘图时，就会出现问题. 对
..
与画布矩形交互
我的简单 HTML 页面中有一个 canvas 元素，它使用 context.fillRect() 方法绘制了几个矩形.我需要与这些绘制的矩形进行交互. 我该怎么做?如何将 onclick 或 onmouseover 与这些矩形绑定? 解决方案 您需要跟踪坐标并检查鼠标是否在如下矩形之一中:http://jsfiddle.net/eGjak/13/. 显然，您也可以使用 mou
..
HTMLCanvasElement 上未解决的方法 captureStream
canvas 元素和方法 captureStream 的情况很奇怪.根据文档 HTMLCanvasElement 有一个方法 captureStream.但是我的 Angular6 应用声称没有这种方法. 所以这段代码不起作用: let canvas: HTMLCanvasElement;canvas = document.createElement('canvas');让流 = canv
..
画布 HTML5 的 Jquery 画笔大小滑块
您好，我正在尝试为我的 Canvas 绘图应用程序创建一个画笔大小滑块，有人可以帮忙解决这个问题吗?我发现的一些方法与我运行应用程序的 Jquery 库不兼容. 谢谢你:) 解决方案 简单: 创建一个range类型的输入元素: 读取其值并应用于上下文的lineWidth:
..
如何使用 javascript 或 Jquery 使用文件系统或操作?
我想使用 Javascript 或 jQuery 对跨浏览器进行一些文件操作，例如: 文件创建文件写入文件读取更新移除/删除 上面的东西可以做吗?如果可能的话，我可以从哪里得到这个想法?请给我建议.无论如何(客户端/服务器)怎么做?我问这个只是为了知道！ 解决方案 不，你不能在浏览器上做这种类型的操作. 您需要服务器端 JavaScript Node.js. 文件系统中有很
..
将形状从调色板拖到 Konvajs 舞台上
最近有人在 Konvajs 聊天流中询问了一个从调色板拖放到 Konvajs 库前面的 HTML5 画布上的示例.没有现成的例子，我很好奇如何实现它. 我在代码笔中回答了这个问题，但决定在此处发布以供(我自己的)将来参考.请参阅下面的答案. 解决方案 这是我使用jquery UI draggable &可滴滴.Konvajs 需要 jquery，所以使用 jquery UI 只是进一
..
在 3 层画布上绘制图像并保存
我有 3 层画布，我为每一层赋予了单独的 id. 这就是我正在做的. HTML
..
应用旋转时，HTML5 画布剪辑()在 Chrome 中不起作用
我正在尝试在画布上使用剪辑区域，一旦坐标系旋转任何非零值，它就会停止工作: window.onload = function() {var canvas = document.getElementById("mainCanvas");var ctx = canvas.getContext("2d");ctx.rotate(Math.PI/8);//!!!裁剪不适用于任何非零值ctx.beg
..
如何用 canvas.toDataURL 的结果替换文件输入的内容?
以下代码(灵感来自 HTML5 Pre-resize images before uploading) 从 中获取选定的图像文件，将其重新压缩为质量为 50% 的 JPG 到变量 dataurl. 问题:如何用这个新压缩的文件替换的内容?这样在提交
的时候，这个新文件会被提交吗? 注意:我不想使用
..
在画布单词搜索游戏中创建线条
我在画布中创建了单词搜索游戏.现在我想当用户选择字符来确定用于突出显示的单词绘制线，但这是我的结果: 和 我想像下面的图片一样画线:这是我本节的代码: 函数 checkForWord() {//获取开始 &结束网格单元//用户拖过的var startCol = parseInt(startX/colWidth);var startRow = parseInt(startY/rowH
..
HTML5 画布中最简单的幻灯片，canvas.context.clearRect 不适用于 setTimeout
这是一个非常简单的幻灯片的代码，它应该在 4 秒内显示 4 张图像，每秒一张图像.相反，我得到了 4 秒的延迟，然后所有图像都被绘制在彼此之上.我做错了什么? //4 张图片var image0 = new Image();image0.src = "img/image0.png";var image1 = new Image();imag
..
如何在鼠标移动事件后通过缓动旋转画布对象?
我不确定我是否在这里使用了正确的词.我猜缓动意味着它不会立即跟随鼠标而是有一些延迟? 目前虹膜正在向我的鼠标方向旋转.如果我希望它具有与 这个?.这样做很难还是只需要简单的代码更改?这类问题有标准的方法/解决方案吗? 这是我当前的代码.它也可以在 Rotating Iris 找到. var canvas = document.getElementById('canvas');va
..
防止 requestAnimationFrame 一直运行
我想知道如何仅在真正需要时才通过requestAnimationFrame 调用animate 函数.目前 animate 一直被调用，我猜这会产生开销. 我已经尝试在我的 animate 函数中比较 targetRadius 和初始 radius 并在它们相同时返回 false.不幸的是，这根本不起作用. 谁能解释一下如何解决这个问题? jsfiddle HTML:
..
如何从 Java websocket 服务器发送图像以在 HTML5 画布中使用?
我有一个用 Java 实现的 WebSocket 服务器.当客户端连接时，我想通过此连接发送图像供客户端在画布元素中使用.我想出了以下服务器代码: public void onOpen(Connection connection) {尝试 {BufferedImage image = ImageIO.read(new File("image.jpg"));ByteArrayOutputStrea
..
加载所有图像后如何发出警报?
我正在构建一个 JavaScript 游戏，我想在加载所有图像后发出警报.我试过这段代码，但它不起作用: 函数 loadEveryThing() {var imgNumber = 0;img1 = 新图像()；img1.src = "1.png"img1.onload = 函数() {imgNumber = imgNumber + 1;}img2 = 新图像()；img2.src = "2.pn
..
客户端使用 Canvas+HTML5 将 rgb-jpg 转换为 8-bit-jpg
许多文章展示了在客户端使用 canvas+html5 将 jpeg 文件转换为灰度的方法.但我需要将图像转换为 8 位灰度以减小其大小，然后再上传到我的服务器. 用canvas+html5可以做到吗? 解决方案 whatwg 规范 提到了一个 toBlob 方法，它应该将画布转换为 jpeg 或 png 并为您提供二进制表示.不幸的是，它还没有得到广泛的支持. 因此，您所能做的
..
将修改后的 SVG 绘制到画布上
我想加载一个 SVG 图像，对其 .contentDocument 进行一些操作，然后将其绘制到画布上. 将 SVG 绘制到画布上的一个很好的例子是:http://www.phrogz.net/tmp/canvas_from_svg.html 但在本例中，svg 被创建为 new Image('url.svg') 对象.当您以这种方式创建 SVG 时，不幸的是，它似乎没有要操作的 co
..