Tag: canvas

为什么这个幻灯片不会起作用: 好的，我要做的是使用下面的示例创建幻灯片放映。问题是动画不起作用。设计明智它看起来不错，但图像不会在我的浏览器中旋转。是因为我必须使用window.setTimeout（）谢谢！ http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/ 也有人似乎有类似的问题，但不像我的代码相同：为什么这个幻灯片代码不起作用？ inheritance人HTML： An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo 然后我们有CSS： #slideshow{ background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideshow ul{ height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; } […]

KineticJS – 用鼠标自由绘制: 我正在构建一个canvas绘画工具，使用它只需拖动鼠标在canvas上绘制。据我所知，线条是这项工作的最佳方式。所以在鼠标按下时我会创建一个KineticJS Line对象，当用户拖动时，我会在最后一个鼠标位置和当前位置之间添加一个点。注意，我只有一个有多个点的线对象。当用户释放鼠标时，Line已完成，每当您再次单击以绘制更多内容时，我都会创建一个新的线对象。问题在于，如果要绘制文本，请说“我的名字是x”，这将产生许多行对象，每个字符为1（“x”和“i”为2）。有一个更好的方法吗？我的想法是只有一个线对象，并且你只是不能从前一个位置添加一条线，然后当你拖动它时。但我不认为KineticJS Line支持这一点。所以基本上，我可以改进我让用户绘制的方式吗？

跨浏览器光标图像的标准大小？ jquery更改光标图像: 我的光标图像正在保存128px x 128px pngs，但现在它们不在任何浏览器中:(做了一些改变？我几天前发布了一个问题，关于我的光标图像没有因为我的绘图应用程序的onclick而改变。我得到了我最初的问题的帮助，你可以看到它在控制台中被正确调用，一切都很好，但图像不会从画笔图像中改变。我认为它可能与尺寸有关，但我不是100％肯定。任何帮助将不胜感激： *************** HTML ************************* ************************** JS *********************** ******** $(‘.tools table tr th div’).each(function() { $(this).click(function () { console.log($(this).attr(‘id setCursor($(this).attr(‘id’)); }); }); function setCursor(id) { console.log(“init.jsCursor(): id: ” + id); switch (id) { case ‘brush’: shape = SHAPE_TYPE.LINE; break; case ‘eraser’: shape = SHAPE_TYPE.ERASER; break; case ‘fill’: shape = SHAPE_TYPE.FILL; break; } console.log(“image: […]

在形状内绘制角度弧: 我有四分。它的拖拉机。在任何一点我点击“绘制”按钮我想显示角度。我试过但它会在外面画出陡峭的角度。但我想在任何一点绘制形状内的弧。 $(document).ready(function () { var c = document.getElementById(‘canvas’); var ctx = c.getContext(“2d”); var a1 = parseInt($(“#p1”).css(“left”)) – 5; var a2 = parseInt($(“#p1”).css(“top”)) – 5; var b1 = parseInt($(“#p2”).css(“left”)) – 5; var b2 = parseInt($(“#p2”).css(“top”)) – 5; var c1 = parseInt($(“#p3”).css(“left”)) – 5; var c2 = parseInt($(“#p3”).css(“top”)) – 5; var d1 = […]

Jquery：将canvas图像添加到服务器: 我试图从canvas发送一个图像并使用ajax将其保存在服务器上。我的Jquery代码如下： $(document).ready(function () { $(“#UpLoad”).click(function () { // trick by a button var canVas = $(‘#Canvas’)[0]; var dataURL = canVas.toDataURL(); $.ajax({ type: “POST”, url: ‘savePicture.php’, data: { imgBase64: dataURL }, cache:false, success: function (data) { console.log(“success”); console.log(data); }, error: function (data) { console.log(“error”); console.log(data); } }); }); }); 但是当我用控制台检查时，我发送了一个空白数据文件（因为我控制台记录了我发送的数据）。有人可以帮忙吗？谢谢。

如何在不使用Canvas的情况下将HTML页面中的div转换为Image？: 如何在不使用canvas的情况下将div元素转换为图像？组织当前使用的浏览器是IE8，而canvas与它不兼容。我正在寻找仅使用JavaScript / jQuery的解决方案。

使用javascript交换带有canvas元素的div: 我有2个div。每个div都有一个canvas元素。在我的程序开始时，我在canvas上放了一个图像。图像不同。然后我尝试使用交换div var contentofmyfirstdiv = $(‘#myfirstdiv’).html(); var contentofmyseconddiv = $(‘#myseconddiv’).html(); $(‘#myseconddiv’).html(contentofmyfirstdiv); $(‘#myfirstdiv’).html(contentofmyseconddiv) ; 所有作品除了每个canvas都是空的。似乎“contentof ……”没有从canvas中获取图像……任何人都知道如何交换canvas的内容？我正在使用Firefox。

如何在Canvas中拖动图像/对象？: 1）在canvas上我用drawSvg（canvg）绘制SVG文件（awesome_tiger.svg）。 2）在那个SVG文件上，我正在绘制图像* （green1.png和pink.png） *，其坐标来自JSON。 var dataJSON = data || []; var dataJSON2 = data2 || []; 3）所以在我能够用draw1（scaleValue）平移完整的绘图。 4）当我点击green.png和pink.png时，他们各自的工具提示能够查看在tooltipFunc函数中完成的操作。 5）我想要做的是，当点击green.png / pink.png并拖动它时我应该能够拖动那些图像而不是Svg文件。如果我单击svg文件并拖动它，那么正常的平移应该可以正常工作。有人可以帮忙吗？ “其他人参考我的问题：”这个主题的内容在下面提到，我在stackoverflow链接上得到了这个。借助于此，任何人都可以帮助我解决项目需求问题吗？以下是我的源代码： JSON数据： data = [ { “id” :[“first”], “x”: [“195”], “y”: [“150”], “tooltiptxt”: [“Region 1”] }, { “id” :[“second”], “x”: [“255”], “y”: [“180”], “tooltiptxt”: [“Region 2”] }, { “id” […]

如何准确计算div背景的背景位置: 我需要为绝对定位的div计算background-position属性。请转到此url： HTML Canvas 从桌面上将800×600图像放在canvas上并hover鼠标。你可以看到一个绝对定位的100×100 px div。我将canvas上的对象保存为此div的背景图像。但是，我对背景位置的计算出了问题。整个想法是在这个div中显示图像的缩放部分。可以在scripts文件夹中的“canvas_tut.js”中看到此代码。 $(div).mousemove(function(e){ //div refers to the absolutely pos div. var x_pos = (e.pageX-50)+’px’; //calculating left and top values var y_pos = (e.pageY-50)+’px’; $(div).css({‘left’:x_pos,’top’:y_pos}); var dataUrl = canvas.toDataURL(); // Saving canvas as image $(div).css(‘background-image’,’url(‘+dataUrl+’)’); var x_bg = ‘-‘+Math.floor(e.pageX – canvas_offset.left)+’px’; //calculating background position var y_bg […]

在asp.net中回发后，HTML5canvas得到了刷新: 我在我的asp.net应用程序中使用HTML5 canvas标签和Jquery插件进行免费手写。 http://www.websanova.com/plugins/paint/html5#websanova 我面临一个问题。单击“我的服务器端”按钮以保存图像时，我会进行回发操作，并刷新页面的canvas。回发后它给我空canvas，我得到了通过代码保存的空白图像。这是我的代码片段 .::wPaint in .NET::. $(“#wPaint”).wPaint(); function loadImage() { var imagedata = $(“#lblImage”).text(); var extension = $(“#lblextension”).text(); $(“#wPaint”).wPaint(“image”, “data:image/” + extension + “;base64,” + imagedata + “”); } function saveImage() { var imageData = $(“#wPaint”).wPaint(“image”); $(“#lblImage”).text(imageData); } function Clear() { $(“#wPaint”).wPaint(); } ::::::::::: CS :::::::::::::::: using System; using System.Collections.Generic; using […]