Tag: html5 canvas

垂直滚动。水平运动: 我正在尝试找到垂直移动页面的代码，然后在垂直滚动的同时水平移动。我很肯定这不是canvas，但我可能是错的。这是一个例子。 http://enso.readymag.com/architects-own-houses/10/

分组和取消分组Fabric.js对象: 我使用fabric.js创建了一种“多边形选择器”或“多边形制作器”。每次单击都会创建多边形的一个角，可以选择，移动等等…双击原始点’关闭’多边形。此时，我采用构成多边形的所有圆/线并将它们分组。到现在为止还挺好。当双击这样的组时，我希望它取消组合并恢复到可移动节点（即移动圆形重塑多边形等）; 但是有一些奇怪的事情发生了 – 看看当你移动圆圈时会发生什么，某些线条看起来“没有加入”圆圈…… 我已经审查了每个group / ungroup相关的fabric.js线程（这里/那里/无处不在）。似乎没有覆盖我在这里的“连接”对象的类型。我把这个问题放在一起的小提琴说它比我更好： http ： //jsfiddle.net/bhilleli/4v8mkw6q/ 破碎的代码是@： //dbl clicked a group so lets ungroup it! items = p._objects; // grab the items from the group you want to // translate the group-relative coordinates to canvas relative ones p._restoreObjectsState(); // remove the original group and add […]

上传使用cropper.js插件裁剪的图像: 我在我的应用程序中使用了cropper.js插件来裁剪图像。我能够裁剪图像。现在我正在尝试上传图片而不是下载它们。我更新了显示裁剪图像的模态窗口，如下所示： × Cropped Close Save Image Save Thumbnail Save 在这里，我在底部添加了一个表单，其中包含保存图像的选项。我试图使用以下脚本来保存表单： $(“#svImg”).click( function() { alert(‘button clicked’); $(“#croperImgForm”).submit(function(e) { var postData = $(this).serializeArray(); var formURL = $(this).attr(“action”); $.ajax( { url : formURL, type: “POST”, data : postData, dataType : “html”, success:function(htmlData) { }, error: function( xhr, status, errorThrown ) { console.log( “Error: ” […]

如何在不改变其模式的情况下更改HTML5 Canvas中图像的颜色: 我想在保持图像的形状，效果和轮廓的同时更改此图像的背景颜色。 function drawImage(imageObj,x, y, width, height){ var canvas = document.getElementById(‘canvas01’); var context = canvas.getContext(‘2d’); context.drawImage(imageObj, x, y, width, height); } var image = new Image(); image.onload = function(){ drawImage(this, 400, 100, 320, 450); }; image.src =”images/658FFBC6.png”;

如何使用html5canvas绘制连续的圆形图案: 我有这个图像：我想用图像绘制作为模式。当我在canvas上得到一个像这样的结果：但我需要输出所以我的问题是： HTML JS var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx; $(document).ready(function () { temp_can1 = document.getElementById(‘f6258182013’); temp_can1_ctx = temp_can1.getContext(‘2d’); rotator3(‘http://i.stack.imgur.com/mLgiX.png’, ’30’); draw_on_cloth(“f6258182013”, ‘http://i.stack.imgur.com/1j8Dw.png’, “mr_rotator_can”, “img_fastening1a”); }); function rotator3(var2, var3) //var2=image aka pattern var3= angle for rotate { var mr_rotator_var = document.getElementById(‘mr_rotator_can’); var mr_rotator_var_ctx = mr_rotator_var.getContext(“2d”); mr_rotator_var.width = mr_rotator_var.width; […]

HTML5从图像生成video: 我想知道，因为HTML和javascript一起迷人，如果HTML5中有一个解决方案来生成许多图像的video文件？例如，您可以通过操作canvas将video加载到canvas中并使其显示为灰度video。但是，我想知道，如果有一种方法可以从该greyscaled版本生成video文件。如果你想通过whatsapp等发送video，那将是有意义的。谢谢

生成在特定时间由文件输入选择的video文件的缩略图/快照: 如何在背景中静默地在video中的特定时间获取通过选择的video文件的快照（即没有可见元素，闪烁，声音等）？

在将Canvas HTML图像下载到PNG之前，Sweet Alert弹出提示: 在我的Canvas绘图应用程序中，我有一个下载到png按钮，我想这样做，所以当用户在我的甜蜜警报弹出提示点击“是保存它”时，只下载canvas上的图像。现在它仍在自动下载。谢谢您的帮助。（如果有人有更好的方式通过Javascript下载也有帮助，它正在下载png但是它已损坏我无法打开它） $(‘#download’).click(function(){ swal({ title: “Are you finished your creation?”, text: “click yes to save”, type: “warning”, showCancelButton: true, confirmButtonColor: “#f8c1D9”, confirmButtonText: “Yes, save it!”, closeOnConfirm: true }, function (isConfirm) { if (isConfirm) { swal(“Saving!”); var base64 = document.getElementById(“canvas”) .toDataURL(“image/png”) .replace(/^data:image\/[^;]/, ‘data:application/octet-stream’); document.getElementById(“download-png”).href = base64 } else { } return false; }); }); […]

如何使用Fabric.js自由绘制圆圈？: 我正在使用FabricJS在canvas上绘制圆圈： var circle = new fabric.Circle({radius: 100, fill: ”, stroke: ‘red’, strokeWidth: 3, originX: ‘center’, originY: ‘center’ }); var text = new fabric.Text(‘HELLO WORLD.’, { fontSize: 30, originX: ‘center’, originY: ‘center’, fill : ‘red’ }); var group = new fabric.Group([ circle, text ], { left: 150, top: 100 }); canvas.add(group); 此代码绘制一个普通圆，但我需要用鼠标自由绘制圆。任何代码帮助将不胜感激。

HTML 5 Canvas似乎重绘了已删除的部分: 我在jsfiddle上创建了以下代码。目标是在单击canvas后从canvas中删除它。实际发生的是网格被清除并完全重新绘制，其中包含已删除的旧框。当所有给定对象都被删除时，网格只会显示为空…我很困惑！我究竟做错了什么？ jQuery(function(){ GridBox = new GridBox(); GridBox.init(); var canvas = GridBox.canvas; canvas.on( ‘click’, GridBox.clickHandler ); }); function GridBox() { this.target = { x: 0, y: 0 }; this.current = { x: 0, y: 0 }; this.boxHeight = 50; this.boxWidth = 50; this.width = 500; this.height = 500; this.context = null; this.canvas […]