Tag: canvas

在canvas中上传的图像可以在html5中拖动，触摸和旋转: 我是Html5的新手。我正在上传一张图片，但它没有在canvas中显示，如果我提供图像的直接来源，那么它将会正常工作。我从这个链接获取帮助javascript：上传图像文件并将其绘制到canvas我会告诉你我的代码。 body { padding:0px; } #canvas { border:1px solid red; } Click and drag the image or drag the dots to resize. <!– Text: –> var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); // var Input = document.getElementById(‘words’); var x = 10; var y = 30; ctx.font = “bold 20px sans-serif”; ctx.fillStyle = […]

动画选项HTML5 Canvas / CSS3 / jQuery: 我有兴趣在其中或者HTML5 / JQuery的组合中做更多类似Flash的动画。浮动的想法之一是飞鸟，角色动画和“补间”式动画序列。我是背景的Flash开发者所以所有这些都是基于Flash的基于时间轴的补间动画系统的第二天性，所以我想知道HTML5 Canvas，CSS3和jQuery等新兴技术有什么可能？这些在动画之类的补间方面有多熟练？阅读有什么好的起点？例如， http：//www.thewildernessdowntown.com/上的飞鸟令人惊叹，它们似乎是3D，可变方向，速度，旋转，襟翼，速度。在Flash中可以相对轻松地实现这一点，创建设置动画作为动画片段，在舞台上生成这些动画并以不同的速度或甚至在PV3D中在tweenlite中移动它们但我接下来不知道如何在canvas上实现这一点。简而言之，关于如何实现上述目标的想法，关于闪存之外的这类动画的良好阅读材料以及您可能拥有的任何一般提示将非常感激。谢谢

html2canvas javascript截图和上传: 是否可以使用html2canvas（ This）来拍摄用户屏幕的图片，还可以上传图片，获取上传链接并将其与ajax一起发送到网络服务器？如果是的话，我该怎么做？

canvas通过鼠标光标绘制线条: 这是我通过按下/释放鼠标按钮在canvas中绘制线条的方式。但这并不是我想要得到的：通过按下鼠标按钮，直线的起点就会设置，终点将跟随鼠标光标。但是线条应该总是一条直线 – 而不是绘制一些曲线，就像现在这样做。通过释放鼠标按钮，线完成/固定。使用它应该能够在canvas上的任何位置绘制直线，任何方向/旋转。按下鼠标按钮作为起点并释放直线终点。 $(function() { var letsdraw = false; var theCanvas = document.getElementById(‘paint’); var ctx = theCanvas.getContext(‘2d’); theCanvas.width = 420; theCanvas.height = 300; var canvasOffset = $(‘#paint’).offset(); $(‘#paint’).mousemove(function(e) { if (letsdraw === true) { ctx.lineTo(e.pageX – canvasOffset.left, e.pageY – canvasOffset.top); ctx.stroke(); } }); $(‘#paint’).mousedown(function() { letsdraw = true; ctx.strokeStyle = […]

分组和取消分组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 […]

在用户点击时加载带有ajax的processing.js草图: 我正在尝试在点击时加载带有ajax的processing.js草图，但它无效。如果我立即加载草图，而不是用户交互，则它可以工作。这是我的代码： $(‘#clicker’).click(function(){ var canvasRef = $(”); canvasRef.attr(‘data-src’,’/uploads/processing_js/anything_1.pde’); $(‘#loader’).append(canvasRef); }); 我还尝试了属性的’data-processing-sources’和’datasrc’。任何人都知道为什么这不起作用？

使用fabric.js在canvas上自由绘图: 我正在尝试使用fabric.js在canvas上绘制一个免费的绘图，但我无法在我这边自由绘制像喷雾，圆圈，纹理模式我使用此代码只有铅笔模式绘图工作，但当我选择喷雾和模式绘制为铅笔的其他模式。这是我的HTML 这里是小提琴墨水 Mode: Pencil Circle Spray Pattern hline vline square diamond texture Line width: Line color: Line shadow width: 这是我的脚本代码 var canvas = new fabric.Canvas(‘canvas’) var drawingModeEl = document.getElementById(‘drawing-mode’), drawingOptionsEl = document.getElementById(‘drawing-mode-options’), drawingColorEl = document.getElementById(‘drawing-color’), drawingLineWidthEl = document.getElementById(‘drawing-line-width’), drawingShadowWidth = document.getElementById(‘drawing-shadow-width’); drawingModeEl.onclick = function() { canvas.isDrawingMode = !canvas.isDrawingMode; if (canvas.isDrawingMode) { drawingModeEl.innerHTML = ‘Cancel […]

撤消/重做绘画程序 – canvas: 我需要为我的绘图程序实现一个撤消/重做系统： http ： //www.taffatech.com/Paint.html 我想出的想法是有2个arrays堆栈，一个用于撤销，一个用于重做。无论何时绘制和释放鼠标，它都会通过推送将canvas图像保存到撤消数组堆栈。如果你绘制其他东西并释放它也会做同样的事情。但是，如果单击“撤消”，它将弹出撤消数组的顶部图像并将其打印到canvas，然后将其推送到重做堆栈。单击时重做将从其自身弹出并按下以撤消。每次鼠标关闭后，将打印撤消的顶部。这是正确的方式还是有更好的方式？

如何在不改变其模式的情况下更改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”;

HTML5 Canvas Fibonacci螺旋: 目前我正在看这个代码，但无法弄清楚出了什么问题。 function fibNumbers() { return [0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89] } function continiusFib(a) { var b = fibNumbers(), c = Math.floor(a), d = Math.ceil(a); if (d >= b.length) return null; a = Math.pow(a – c, 1.15); return b[c] + (b[d] – b[c]) * a } function drawSpiral(pointA, pointB) { […]