Questions tagged «html5-canvas»

已关闭。这个问题需要更加集中。它当前不接受答案。 想改善这个问题吗？更新问题，使其仅通过编辑此帖子来关注一个问题。 7年前关闭。 改善这个问题 我一直在研究HTML canvas库，遇到了这个问题。HTML canvas JavaScript库和框架的最新技术是什么？在2010年被问到。最高答案是Fabric.js。经过更多研究后，我发现http://www.html5canvastutorials.com/上有有关KineticJs的教程，该教程具有多个画布以提高速度。后来更多的研究表明，在速度和功能方面，Canvas库似乎无处不在。今天的JavaScript Canvas库和框架的当前状态是什么？有没有拔得头筹？ 编辑：由于图书馆在不断变化，并且最近有很多人来这里获取有关新图书馆的新闻和信息，所以我将问题更改为更加永恒。

90 javascript  html  html5-canvas 

我正在尝试使用画布调整某些图像的大小，但是我对如何使其平滑一无所知。在Photoshop，浏览器等上。它们使用几种算法（例如，双三次，双线性），但是我不知道这些算法是否内置在画布中。 这是我的小提琴：http : //jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); 第一个是正常调整大小的图像标签，第二个是画布。请注意，画布如何不那么光滑。如何获得“顺滑度”？

90 javascript  html  image  canvas  html5-canvas 

我总共使用n00b，HTML5并且正在使用canvas渲染形状，颜色和文本。在我的应用程序中，我有一个视图适配器，可以动态创建画布，并在其中填充内容。这非常有效，除了我的文本非常模糊/模糊/拉伸。我还看到了许多其他文章，关于为什么定义in的宽度和高度CSS会导致此问题，但我在中都进行了定义javascript。 相关代码（查看Fiddle）： var width = 500;//FIXME:size.w; var height = 500;//FIXME:size.h; var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)"; var context = canvas.getContext("2d"); ////////////////// //// SHAPES //// ////////////////// var left = 0; //draw zone 1 rect context.fillStyle = …

87 javascript  html  html5-canvas 

请看下面的例子： http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; 如您所见，尽管据说drawImage自动应用了抗锯齿，但该图像并未抗锯齿。我尝试了许多不同的方法，但是似乎没有用。您能告诉我如何获得抗锯齿图像吗？谢谢。

81 html  canvas  html5-canvas  interpolation  antialiasing 

有什么方法可以将HTML Canvas的内容读取为二进制数据？ 目前，我具有以下HTML来显示输入文件及其下方的画布： <p><button id="myButton" type="button">Get Image Content</button></p> <p>Input:<input id="fileInput" type="file"/></p> <p>Canvas<canvas id="myCanvas" width="578" height="200"/></p> 然后，我已经设置了输入文件以正确设置画布，这可以正常工作： $('#fileInput').on('change', function() { $.each(this.files, function() { var image = new Image(); image.src = window.URL.createObjectURL(this); image.onload = function() { $("canvas").drawImage({ source: image, x: 50, y: 50, width: 100, fromCenter: false }); }; }); }); 现在，单击按钮时，我需要从Canvas中获取二进制数据（Base64编码），以便将数据推送到服务器... …

79 javascript  html  html5-canvas  fileapi 

我有一个允许用户上传图像的表格。 加载图像后，我们将对其进行一些缩放，以减小其文件大小，然后再将其传递回服务器。 为此，我们将其放置在画布上并在那里进行操作。 此代码将在画布上渲染缩放后的图像，画布尺寸为320 x 240px： ctx.drawImage(img, 0, 0, canvas.width, canvas.height) ...其中canvas.width和canvas.height是图像的高度和宽度xa基于原始图像大小的缩放因子。 但是当我去使用代码时： ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height ...我只会在画布上得到图像的一部分，在这种情况下，它是左上角。我需要将整个图像“缩放”以适合画布，尽管实际图像尺寸大于320x240画布尺寸。 因此，对于上面的代码，宽度和高度为1142x856，因为这是最终图像大小。我需要保持该大小，以便在提交表单时将beck传递给服务器，但只希望它的较小视图显示在画布中供用户使用。 我在这里想念什么？谁能指出我正确的方向？ 提前谢谢了。

79 javascript  html  canvas  html5-canvas 

我想绘制一个如图所示的网格，但是我完全不知道应该从哪里开始。我应该使用SVG还是将Canvas与HTML5一起使用以及如何绘制。 请对此进行指导。我希望此网格在其上绘制矩形，圆形或其他图表，然后我将计算该图表的面积，例如正方形的面积。

77 html  svg  html5-canvas 

jQuery('#carregar').click(function() { var canvas = document.getElementById('canvas'); var image = document.getElementById('image'); var element = canvas.getContext("2d"); element.clearRect(0, 0, canvas.width, canvas.height); element.drawImage(image, 0, 0, 300, 300); }); jsfiddle.net/braziel/nWyDE/ 我在将图像向右或向左旋转90°时遇到问题。 我在画布上使用图像，同一屏幕上将有多个与示例相同的画布，但我将其尽可能地靠近项目。 我问，当我单击“向左旋转”和“向右旋转”时，如何将图像向左或向右旋转90°？ 我在互联网上尝试了几种代码，但均无效果。

73 html  image  canvas  rotation  html5-canvas 

我正在使用canvas及其包含大量数据（数百万个整数）的ImageData对象。因此，使用几个阵列已经占用了大量内存（最大300MB）。有没有必要的时候可以释放一些数组的内存的方法？我正在尝试分配undefined给该变量。这样对吗？

70 javascript  arrays  memory-management  html5-canvas 

我正在使用基于（Chartjs-tsgauge）的仪表图。我想将图表的背景色与量规限制分开设置。Charts.JS如何呈现背景的问题是因为我使用的插件没有关于背景的代码。例如，我有一个带有极限的量规[0, 20, 40, 60, 80, 100]。我要设置[0-30]为绿色，[30-70]黄色和[70-100]红色。当前代码：CodePEN 这是我目前的选择。 var ctx = document.getElementById("canvas").getContext("2d"); new Chart(ctx, { type: "tsgauge", data: { datasets: [{ backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"], borderWidth: 0, gaugeData: { value: 7777, valueColor: "#ff7143" }, gaugeLimits: [0, 3000, 7000, 10000] }] }, options: { events: [], showMarkers: true } }); 这是我设置背景颜色的方法。 new …

9 javascript  html5-canvas  chart.js