Tag: canvas

按canvas旋转后的图像裁剪: 我有一个html5canvas。我想在canvas上绘制/旋转图像，图像大小不会改变。我根据图像的大小设置canvas的宽度/高度。旋转图像时出现问题。旋转图像后，红色三角形被裁剪。在下面链接一个示例显示这个问题。请帮助。 http://jsfiddle.net/zsh64/6ZsCz/76/ var canvas = document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); var angleInDegrees = 0; var image = document.createElement(“img”); image.onload = function () { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0,0); }; image.src = “Images/rotate.png”; $(“#R”).click(function () { angleInDegrees += 90; drawRotated(angleInDegrees); }); $(“#L”).click(function () { angleInDegrees -= 90; drawRotated(angleInDegrees); }); function drawRotated(degrees) […]

resize时html5canvas重绘: 我有两个canvas元素，需要在按钮点击时resize。和脚本： var sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null; function drawCanvas(div) { canvas = document.querySelector(div + ” #canvasGraph”); ctx = canvas.getContext(‘2d’); sketch = document.querySelector(div + ” #canvasDiv”); sketch_sl = getComputedStyle(sketch); canvas.width = parseInt(sketch_style.getPropertyValue(‘width’)); canvas.height = parseInt(sketch_style.getPropertyValue(‘height’)); tmp_canvas = document.createElement(‘canvas’); tmp_ctx = tmp_canvas.getContext(‘2d’); tmp_canvas.id = ‘tmp_canvas’; tmp_canvas.width = canvas.width; tmp_canvas.height = canvas.height; sketch.appendChild(tmp_canvas); 重绘function： // here […]

JavaScript运行时错误：’$’未定义: 如此经典的问题，但在找到实际原因时遇到了可怕的时间。通常当我看到这个错误时，因为jQuery引用是在代码需要它之后，或者返回jQuery链接，或jQuery冲突等等……到目前为止，似乎没有一个是这种情况。不幸的是，寻找这个问题的解决方案导致我发布此类案件后发布。我相信我的问题同样简单，但是一个多小时的狩猎，仍然没有运气…… 编辑：附加信息…解决方案文件（我已经多次重新创建，试图解决这个问题。是一个JavaScript Windows Store空白应用程序模板，我在Visual Studio中这样做。唯一的参考文件是Windows库javascript 1.0，我试过删除它来测试。 HTML5 Canvas Template /* styles here */ Canvas not supported. $(document).ready(function() { var canvas = $(“#myCanvas”).get(0); var context = canvas.getContext(“2d”); function renderContent() { // we’ll do our drawing here… } renderContent(); });

是否有可能使JQuery keydown响应更快？: 我正在编写一个带有JQuery和HTML5canvas标签的简单页面，我在canvas上移动一个形状，按’w’表示向上，’s’表示向下，’a’表示向左，’d’用于向右。我把它全部工作了，但我希望这个形状在敲击钥匙时以恒定的速度开始移动。现在有某种保持期，然后运动开始。如何让动作立即发生？这是我的代码的重要部分： Your browser does not support the HTML5 canvas tag. start navigating coords should pop up here key should pop up here var c=document.getElementById(“myCanvas”); var ctx=c.getContext(“2d”); //keypress movements var xtriggered = 0; var keys = {}; var north = -10; var east = 10; var flipednorth = 0; $(document).ready(function(e){ $(“input”).keydown(function(){ keys[event.which] […]

如何将输入文本插入图像？: 我想为magento开发扩展，这有助于创建自定义T恤，但我不知道该怎么做。我想提供像这个网站的functionhttp://www.inkpixi.com/item/ATV+Repair/ A252 / 329 / item.html 死链接在这里输入名称，然后名称自动插入图像。我想提供这个，但没有得到正确的事情

Javascript函数将基础64图像旋转X度并返回新的base64: 我想要一个javascript函数，它将base64图像旋转X度并返回新的base64图像。示例我希望用以下内容调用函数： var newImg = rotateImg（imageData，90）; //应返回旋转90度的原始图像的base64字符串。（底部示例base64图像字符串）理想情况下，该function将向后兼容非html5浏览器，但为了简单起见，欢迎使用纯canvas解决方案。我已经和它斗争了好几天。我理解解决方案可能是，用原始字符串加载图像对象，创建临时canvas对象和上下文，然后旋转上下文，然后将canvas转换回图像字符串，但只是可以让它工作….请帮助！示例图像字符串：数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAACIAAABBCAMAAACD + YYEAAAABGdBTUEAALGPC / xhBQAAAwBQTFRFpI8jl5FIn5V0paijNzAfJiIavsHNlpabcnB6iH0XZ2Z4gH6BnJM2paSHu7NVoqGdoi8pRDwnnz40vrl4qJtgpqKNg3pRoJBL8 + UJPj08nJeCNCkQhWgG5erh0q2RxcnKyYcT8POb391VRTAE + / rqzsqsqZ8xsaBa38sVgXU0jI6SpKKUdlpLk4VEfXAcjId2UFBMo5tc5bwCdX6noJtzwLIkkYAvmI5fu61GfnlMjn4Y39gPeXJVlY99gYKNb19afnli186St58T0cUPV09Azb8fX1w / nJqdp5s3dGtHMzhLGRcex8Fk4tZspoYSdnNxpKBxko51tKRg5d6Ig4B1181vX2BgFxEQWFE8W1dDiYuVdG5l5NQyraqZa2lmamppY15AgH5shYN8d3NocG1feXhyAAAA15Bry6847fPEPEWJv0E28 + ZTw76K / txB3cpM3NvAkpKecVsJjouKXGKJ9 + Io7ezNnqGts69tf3pT9vOt / vYY9d46 / uwVHx0mZm6hv6AmmZJh8uWS5t6jYWd78e2RVEQQ7 + qzCQ9JsrCY7dlNVVVapZIq / PMw1rkI7eVzxrgM7u4Ih24lg30UYl0krp5HnpqI0sdhzKEM3tWEj4tp7uiE69dY3MEKxsB6 // 2zz8JRKjBW / fdZXlpFua0O / TSM / 9IB / + 5oLB0B / O0D // 7cxq8h8t4DSk9sBgII7NkL […]

图表区域背景颜色chartjs: 我有图表js的问题，我想像上面的图像着色图表区域我试图从charJs Docs中找到配置，但没有匹配。它是否可以改变图表区域的背景颜色？如果可能，任何人都可以帮助我 HTML 使用Javascript var ctx = document.getElementById(“barChart”); var barChart = new Chart(ctx,{ type: ‘bar’, data: { labels:[“Label1″,”Label2″,”Label3″,”Label4”], borderColor : “#fffff”, datasets: [ { data: [“2″,”3″,”1″,”4”], borderColor : “#fff”, borderWidth : “3”, hoverBorderColor : “#000”, backgroundColor: [ “#f38b4a”, “#56d798”, “#ff8397”, “#6970d5” ], hoverBackgroundColor: [ “#f38b4a”, “#56d798”, “#ff8397”, “#6970d5” ] }] }, options: […]

使用图像创建Canvas元素并附加到父级: 我需要创建带有图像的Canvas元素，并且需要附加到父级，因为我已经完成了这个 window.onload = function() { var canvas = document.createElement(‘canvas’); var context = canvas.getContext(“2d”); canvas.id = “canvas_id”; canvas.setAttribute(“class” ,”canvas”); canvas.height = “400”; canvas.width = “800”; var image = new Image(); image.src = “http://localhost/tile.png”; image.onload = function(){ context.drawImage(image, canvas.width, canvas.height); } document.body.appendChild(canvas); } 它给空白canvas 有人可以指导我吗？

旋转后，在正确的位置绘制图像: 如您所见，我尝试在canvas中旋转图像： https://jsfiddle.net/1a7wpsp8/4/ 因为我在[0, image_height]周围旋转了图像[0, image_height]图像信息丢失了。缺少部分头部，并且“canvas”的高度现在变小，以显示整个旋转图像。为了解决这个问题，我想我必须将旋转原点更多地向右移动并增加canvas高度。我添加了一个方法，以特定的角度获取原点周围的旋转点： function rotate(x, y, a) { var cos = Math.cos, sin = Math.sin, a = a * Math.PI / 180, xr = x * cos(a) – y * sin(a); yr = x * sin(a) + y * cos(a); return [xr, yr]; } 有了这个我试图计算新的旋转原点，但失败了。旋转图像的首选方法是什么？如何在canvas上显示完整图像，没有红色边框？谢谢https://jsfiddle.net/1a7wpsp8/4/

无法通过jsPDF从Html div制作PDF: 我有这个js代码： var doc = new jsPDF(); $(‘#pdf_new’).click(function(){ var html=$(“.wrap_all”).html(); doc.fromHTML(html,200,200, { ‘width’: 500, }); doc.save(“Test.pdf”); }); 在HTML中我有这样的代码： …. …. 什么都行不通……控制台回到我身边：无法读取未定义的属性#wrap_odd “ （PS对不起我的英文）