Tag: canvas

使用@ font-face将文本绘制到<canvas>在第一次不起作用: 当我通过@ font-face加载的字体在canvas上绘制文本时，文本无法正确显示。它根本不显示（在Chrome 13和Firefox 5中），或字体错误（Opera 11）。这种意外的行为只发生在第一次使用字体的graphics上。之后，一切正常。这是标准的行为还是什么？谢谢。 PS：以下是testing用例的源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face and <canvas></title> <style id="css"> @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } </style> <style> canvas, pre { border: 1px solid black; padding: 0 1em; } </style> </head> <body> <h1>@font-face and <canvas></h1> <p> Description: click the button […]

人体animation不平滑: 下面代码中的“spaceShip”在按住任何一个箭头键的开始时并不平滑。它移动一步，冻结一秒钟，然后“顺利”移动。我怎样才能使它从一开始就顺利地移动，而不是“冻结”？我的代码： <!doctype html> <html> <head> <meta http-content="Content-type" charset="utf-8"> <title>Make body move smoothly</title> <style type="text/css"> body { } canvas { margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="600"></canvas> <script type="text/javascript"> // Set up requestAnimationFrame and cancelAnimationFrame (function() […]

使用Javascript获取canvas中的最大字体大小: 我正在绘制需要在完整可用的屏幕上（100％宽度和高度）的canvas。我用这样的javascript设置canvas的宽度和高度 var w = window.innerWidth; var h = window.innerHeight; var canvas = document.getElementById("myCanvas"); canvas.width = w; canvas.height = h; 设置完canvas后，我需要在其中绘制一些需要获得最大可用字体大小的文本。请帮我find如何显示最大字体的文字。文本可能包含单个字符（大写和小写）或string，也可能包含数字。我需要用javascript而不是jQuery来做。感谢您的帮助。

如何获得tkintercanvasdynamic调整窗口宽度？: 我需要在tkinter中获取一个canvas，将其宽度设置为窗口的宽度，然后在用户使窗口变小/变大时dynamic地重新调整canvas的大小。有没有办法做到这一点（容易）？

如何使用html5 canvas / javascript / jquery将svg转换为png并保存在服务器上: 那么，我需要一些关于转换.svg文件/图像到.png文件/图像的帮助… 我有一个.svg图像显示在我的网页上。它保存在我的服务器上（作为.png文件）。我需要将其转换为.png文件（点击button）并将.png文件保存在服务器上（我将使用.ajax请求来完成此操作）。但问题是转换。我读了很多关于html5 Canvas的东西，这可能有助于做我现在需要做的事情，但我找不到任何明确的解决scheme，而且，我不明白我发现的一切…所以我需要一些明确的build议/帮助，我必须这样做。这里是“html的想法”模板： <html> <body> <svg id="mySvg" width="300px" height="300px"> <!– my svg data –> </svg> <label id="button">Click to convert</label> <canvas id="myCanvas"></canvas> </body> </html> 和一些js： <script> $("body").on("click","#button",function(){ var svgText = $("#myViewer").outerHTML; var myCanvas = document.getElementById("canvas"); var ctxt = myCanvas.getContext("2d"); }); </script> 然后，我需要将svg绘制到Canvas中，取回base64数据，并将其保存在我的服务器上的.png文件中…但是…怎么样？我读了很多不同的解决scheme，我其实…失去了…我正在一个jsfiddle，但我其实…无处… http://jsfiddle.net/xfh7nctk/6 / …感谢阅读/帮助

使用HTML5canvas – 旋转关于任意点的图像: 将旋钮转到半圆（北半球）图像的顶部作为背景。范围可以是0-180度。在input到进行canvas转换的方法上时，表盘将旋转并停止在匹配的值上。这是我正在尝试基于帮助和样品由phrogz传递

上传前使用HTML5调整图像大小: 我发现了几个不同的post，甚至在回答这个问题的stackoverflow上的问题。我基本上实现这个职位相同的东西。所以这是我的问题。当我上传照片时，我还需要提交表格的其余部分。这是我的html： <form id="uploadImageForm" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <input id="name" value="#{name}" /> … a few more inputs … </form> 以前，我不需要调整图像大小，所以我的javascript看起来像这样： window.uploadPhotos = function(url){ var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ … handle error… } } […]

HTML5 Canvas通过CSS与元素属性的大小: 我不明白为什么下面的代码片段会产生不同的结果，因为css会在放大时缩放canvas， <style> #canvas { width: 800px; height: 600px; } </style> <canvas id="canvas"></canvas> 与这种方法相反（按预期工作）： <canvas id="canvas" width="800px" height="600px"></canvas>

导出具有高质量图像的canvas的最佳做法是什么？: 我需要你的帮助。我解释我的情况：我正在使用fabric.js库在应用程序中放置形状，文本等。我的canvas尺寸为1000×1000像素（约26.45×26.45厘米）。我有一个图像上传脚本只能上传高质量的图像，如300 dpi。基本上我所做的是： – 绘制canvas（上传图片，放置文本等）; – 调整尺寸乘以比例因子的canvas最终能够以300dpi的图像; – 以PNG格式保存canvas; – 使用php / ajax和Imagick，把canvas以300 dpi的质量，保存在jpg格式。问题是：当我保存canvas时，上传的图像的质量将会下降，因为我调整了canvas的大小是72 dpi（在我保存PNG的那一刻）。我认为可能的解决scheme是：上传图片时，将位置以x和y的位置和大小保存到整个过程的最后，以JPG格式replace图片。如果这是一个最好的方法，可以使用Imagick库或PHP？我想知道你的意见。谢谢。