Tag: canvas

如何将带有图像的canvas保存到PNG文件: 我使用以下代码 canvas和图像的HTML代码用于从服务器获取图像并在canvas上显示然后显示图像的JavaScript代码 var canvas = document.getElementById(“myCanvas”); var ctx = canvas.getContext(“2d”); baseimage = new Image(); baseimage.src = ‘what.jpg’; baseimage.onload = function() { ctx.drawImage(baseimage,1,1); } var dataURL = canvas.toDataURL(“image/png”); document.getElementById(‘canvasImg’).src = dataURL; $(“#myCanvas”).show(); 正在显示图像，但没有“what.jpg”文件。在Canvas上，文件是可见的，但在IMG标签中没有任何东西可以看到。我在最新版本的Chrome上运行此function。

jQuery和Canvas.toDataURL: 我正在编写一个脚本，其中一小部分涉及拍摄canvas并将其转换为可下载的图像。要做到这一点，我做： var thumb_jpeg = thumbnail.toDataURL(“image/jpeg”); $(“#” + options.dest).attr(‘src’,thumb_jpeg); …其中thumbnail是canvas标签，options.dest是img id的名称。此代码在Chrome中运行良好，但是当我在Firefox中尝试时，Firebug会抛出此错误： Security error” code: “1000 var thumb_jpeg = thumbnail.toDataURL(“image/jpeg”); 我会链接到整个脚本，但一切都托管在我的计算机上。有谁知道这可能意味着什么？谢谢！杰夫

HTML5canvas中的中心（比例字体）文本: 我希望能够在我可以计算的矩形区域中居中单行文本。我期望在canvas上的二维几何中做的一件事是将宽度未知的东西居中。我听说作为一种解决方法，您可以在HTML容器中创建文本，然后调用jQuery的width（）函数，但是我没有正确处理文档正文的瞬间添加？并得到宽度为0。如果我有一行文本，比填充屏幕中的大部分宽度短得多，我如何知道在我知道的字体大小的canvas上有多宽？ TIA，

快速打印HTML5canvas: 我想将canvas图像直接发送/打印到默认打印机。这意味着快速打印。任何人都可以提示。 Javascript或jQuery。

如何使用canvas修改来自其他域的图像？: 这是我使用的代码当我有image.src = “/local/directory/image.png” image.src=”http://sofzh.miximages.com/javascript/image.png”工作，但如果我使用image.src=”http://remote/path”它加载图像但restmousemovefunction不工作。你是如何解决的？复制并粘贴到test.htm $(document).ready(function() { var image = new Image(); var ctx = $(‘#canvas’)[0].getContext(“2d”); image.src = “http://www.google.com/intl/en_com/images/srpr/logo3w.png”; //image.src = “/agents/google.png”; image.width=”340″; image.height=”220″; image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); } $(‘#canvas’).mousemove(function(e) { var canvasOffset = $(this).offset(); var canvasX = Math.floor(e.pageX – canvasOffset.left); var canvasY = Math.floor(e.pageY – canvasOffset.top); var […]

设置HTML5 Canvas的背景填充，描边和不透明度: 我使用下面的代码来设置myCanvas样式，但我无法设置fillStyle 。然而， strokeStyle和lineWidth工作正常。有人可以帮忙吗？ Init() { var can = byId(‘myCanvas’); // get it’s context hdc = can.getContext(‘2d’); hdc.strokeStyle = ‘red’; hdc.lineWidth = 2; // Fill the path hdc.fillStyle = “#9ea7b8”; hdc.opacity = 0.2; hdc.fill(); } // And call the drawPoly function with coordinates. function drawPoly(coOrdStr) { var canvas = byId(‘myCanvas’); hdc.clearRect(0, 0, canvas.width, canvas.height); […]

hover以改变canvas的颜色: 我是canvas上的新手，任何人都可以帮忙缩短这个问题。我创建了5个canvas圈。当我将鼠标hover在任何圆圈上时，我只需更改canvas颜色，当hover在圆圈上时，我在canvas上添加了一个类但是可以仅更改颜色。我不想再次创建canvas时只更改hover时的颜色。 $(document).ready(function(){ $(‘.menuballs’).hover(function () { $(“.menuballs”).children(‘canvas’).toggleClass(‘hover-intro’); if($(this).is(‘:hover’)) { var c = document.getElementsByClassName(“hover-intro”); var graphics = c.getContext( ‘2d’ ); graphics.fillStyle = ‘green’; graphics.fill(); } }); }); 尝试使用hover-intro类，但是给定HTMLElement，我需要CanvasElement来填充圆圈。

在canvas对象上使用jQuery动画: 我想用一个简单的形状使用路径机制绘制html5canvas元素的动画。当鼠标hover在它上面时，我想放大它，使它更不透明并改变颜色。我可以使用jQuery的animate（）函数吗？什么是最好的方法？ canvas是否有机制来执行此类动画？

html5canvas中的碰撞检测: 我正在尝试构建一个游戏，用户应该将圆圈放在垂直条中，但我在碰撞检测function方面遇到了麻烦。这是我的jsfiddle： http ： //jsfiddle.net/seekpunk/QnBhK/1/ if (collides(Bluecircle, longStand)) { Bluecircle.y = longStand.y2; Bluecircle.x = longStand.x2; } else if (collides(Bluecircle, ShortStand)) { Bluecircle.y = ShortStand.y2; Bluecircle.x = ShortStand.x2; } function collides(a, bar) { return ax == bar.x1 && ay == bar.y1; }

使用javascript / jquery动态调整canvas窗口的大小？: 如何使用javascript / jquery调整canvas大小？使用css函数resize并将其应用于canvas元素只会拉伸内容，就像拉伸图像一样。如果没有伸展，我该怎么做呢？ http://jsfiddle.net/re8KU/4/