标签: html5-canvas

HTML5 Canvas 上的伽玛调整?

我找到了增加伽马的方法,但没有办法减少它!本文阐述了增加伽马值的公式。该公式适用于增加伽马值,但不适用于减少伽马值,即使我将减少值应用到画布的新实例上也是如此。我尝试重新绘制画布并使用负值进行伽玛计算,但我没有找回原来的画布。

//For increasing, I tried
gamma = 0.5;
gammacorrection = 1/gamma;
r = Math.pow(255 * (r / 255), gammacorrection);
g = ...
b = ...

//For decreasing
gamma = -0.5;
gammacorrection = 1/gamma;
r = Math.pow(255 * (r / 255), gammacorrection);
g = ...
b = ...
Run Code Online (Sandbox Code Playgroud)

第一部分有效。第二个没有。

html5-canvas

0
推荐指数
1
解决办法
5409
查看次数

防止画布对象发生碰撞或交叉

我正在画布上绘制 n 个矩形。矩形是可拖动和可缩放的。我想防止它们重叠或相交。最好的情况是,如果它们只是相互咬合。

我想办法检查一下十字路口。在我的示例中,我将触摸对象的不透明度设置为 0.1。

巧合的是,在我尝试解决这个问题时,我的对象在接触另一个对象时无法释放。请参阅http://jsfiddle.net/gcollect/jZw7P/ 这是因为第91行,警报没有执行。 alert(math.abs(distx));

实际上这是一种解决方案,但绝对不是一个优雅的解决方案。

有任何想法吗?

intersection canvas collision-detection html5-canvas fabricjs

0
推荐指数
1
解决办法
8552
查看次数

浏览器如何渲染canvas元素的内容

浏览器如何渲染html画布的内容?像 context.lineTo(x, y) 这样的东西。必须有某个组件将所有函数调用转换为像素数据。我真正想知道的是是否有某种方法可以获取这些像素数据而不需要实际将其渲染到某个地方。

我想知道我们是否可以运行某种独立的 JavaScript 引擎(v8)并将 JavaScript 代码传递给它并获取像素数据作为输出。

html javascript html5-canvas web

0
推荐指数
1
解决办法
490
查看次数

如何在 FabricJS 中编写用于边缘检测的卷积滤波器

我想在 Fabricjs 中编写一个用于边缘检测的卷积滤波器,但矩阵不起作用。

这是矩阵(想法取自http://homepages.inf.ed.ac.uk/rbf/HIPR2/sobel.htm): new fabric.Image.filters.Convolute({ // edge detect matrix: [[ -1, 0, 1, -2, 0, 2, -1, 0, 1 ], [1, 2, 1, 0 ,0 ,0, -1, -2, 1 ]] })

这是小提琴

注意:-您需要单击图像才能获取图像处理的复选框。

javascript html5-canvas fabricjs

0
推荐指数
1
解决办法
1660
查看次数

以高分辨率导出画布的可见区域

我正在使用 konvajs 和 anglurjs 开发 html5 画布。我想以更高分辨率导出画布的可见区域。

我可以使用stage.toDataURL('JPEG',1.0)导出可见区域,但它会重新调整图像的分辨率。它根据浏览器窗口设置图像尺寸,但我想以与导入时相同的分辨率导出图像。

html5-canvas konvajs

0
推荐指数
1
解决办法
1153
查看次数

没有 Three.js 的 Javascript 3d 地形

我已经四处搜索,但找不到任何像我正在尝试做的那样不以某种方式使用 Three.js 的东西(我无法使用 Three.js,因为我的计算机太旧了,无法支持 Webgl)。这是我到目前为止所得到的:

HTML:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="terrain.js"></script>
    <title>Terrain</title>
</head>
<body>
<canvas id="canvas" height="400" width="400"></canvas>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

JavaScript:

var canvas, ctx, row1 = [], row2 = [], intensity = 15, width = 20, height = 20, centery = 200, centerx = 200, minus, delta = 1.6, nu = .02;

window.onload = function() {
    canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
    ctx.lineStyle = '#000'
    for (var i = 0; i < height; i++) {
        row2 = []; …
Run Code Online (Sandbox Code Playgroud)

javascript terrain html5-canvas

0
推荐指数
1
解决办法
2312
查看次数

如何在js中找到画布的中心

我有canvas。我有一个ctx。我希望在的中心ctx绘制,但是canvas

canvas.height/2
canvas.width/2
Run Code Online (Sandbox Code Playgroud)

不起作用

http://jsfiddle.net/3hnbarcg/3/

另外,我需要证明它有效,然后我才能接受

html javascript html5-canvas

0
推荐指数
1
解决办法
4055
查看次数

HTML5 Canvas 中的曲线绘制

我想在 HTML5 画布中绘制一条像这里提到的曲线。有人可以指出我应该使用什么方法吗?

javascript line html5-canvas

0
推荐指数
1
解决办法
1万
查看次数

如何在画布中填充二次曲线?

是否可以填充二次曲线?

\n\n

我是画布新手,我想填充我在 context.quadraticCurveTo() 中绘制的上部部分的颜色,但是当我尝试 context.fill() 时,它没有填充我的预期部分。我想填充画布的上半部分,该部分被笔划分开。

\n\n

请参阅随附的片段。

\n\n

\r\n
\r\n
const canvas = document.getElementById(\'canvas\');\r\nconst ctx = canvas.getContext(\'2d\');\r\nconst ch = canvas.height;\r\nconst cw = canvas.width;\r\n\r\n// Quadratic B\xc3\xa9zier curve\r\nctx.beginPath();\r\nctx.moveTo(0, 60);\r\nctx.quadraticCurveTo(ch, 0, cw, 35);\r\nctx.stroke();\r\nctx.fill();
Run Code Online (Sandbox Code Playgroud)\r\n
#canvas {\r\n  border: 1px solid;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<canvas id="canvas"></canvas>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

html javascript css canvas html5-canvas

0
推荐指数
1
解决办法
1792
查看次数

JS 在带有边距的画布上绘图时使用错误的坐标

大家好,我在使用画布和一些基本的 CSS 样式时遇到问题。

因此,我想让自己更熟悉画布元素,因此我遵循了 Dev Ed (Youtube) 的教程,了解如何使用画布制作绘图应用程序。

我想通过添加一些线条和背景的颜色选项、添加标题等来对其进行一些升级。我想要将画布元素居中并为其指定固定大小。

现在,当我尝试使用它时,画布使用错误的坐标来绘制线条。

提前致谢。

控制鼠标坐标的代码:

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 10;
  ctx.lineCap = "round";

  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);
}
Run Code Online (Sandbox Code Playgroud)

Codepen 上完整代码的链接:https://codepen.io/Skafec/pen/NWKzxrg

html javascript css html5-canvas

0
推荐指数
1
解决办法
886
查看次数