Tag: canvas

在image1上重叠image2: 我们在网站上显示image1如下：现在我们提供上传image2的选项，我们想要的是上传的image2应该像现在这样在现有的image1上重叠。但现在当我们上传image2时，image1在image2上重叠。 var canvas = new fabric.Canvas(‘canvas’); document.getElementById(‘file’).addEventListener(“change”, function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { // var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); var oImg = img.set({left: 0, top: 0, angle: 00, width: […]

Fabric.js统治者与缩放: 我有疑问。我正在编写这样的编辑器，我也想要一个标尺来添加它（用鼠标滚动改变值（放大和缩小））但我不能这样做。我在github上尝试了所有的统治者，但他们只运行身体标签。不幸的是，没有可放大或缩小的文档。我是HTML5canvas的新手，我被卡住了。等待你的帮助。谢谢！

如何在canvas上画线: 我想以如下方式在canvas上的圆圈内绘制一些线条。我不知道如何绘制如下所示的线条。但我有基本知识在canvas上绘制线条和弧线。如何进行？

canvaseyeDropper: 我需要实现一个吸管工具。我想要它，所以你点击吸管按钮使其激活，然后使用onmove它将改变我的颜色选择器的颜色，当你点击使用onclick它将使用以下颜色选择颜色选择器： $(‘#colorpickerHolder’).ColorPickerSetColor(eyeDropperColour); 变量eyeDropperColour将根据您所使用的颜色像素使用onlick设置。我想知道我必须根据我拥有的图层来做它：canvas和canvasCursor。我一直在看这个指南，但我不能让它适用于我的项目？ http://palebluepixel.org/2011/11/16/html5-canvas-eyedropper/ 这是我的项目： http ： //www.taffatech.com/Paint.html 我有： var eyeDropperActive = false; var eyeDropperColour; 和： $(“#brushEyeDropper”).click(function() { if ( eyeDropperActive == true) { eyeDropperActive = false; } else if ( eyeDropperActive == false) { eyeDropperActive = true; } });

计算canvas渐变的旋转: 我正在尝试使用渐变来填充canvas的某个区域，但我希望能够设置渐变的角度。我知道这可以通过在渐变的创建中使用不同的值（ ctx.createLinearGradient(x1, y1, x2, y2) ）来实现，如下所示：但我似乎无法理解将角度（弧度）转换为将产生相同角度的渐变大小所需的数学（我所指的角度垂直于渐变的方向，所以a 0弧度角将显示右侧的渐变）简而言之，我如何将（数量）弧度转换为X×Y形状？的jsfiddle （所以没有人浪费他们的时间：我特别不想在这种情况下使用context.rotate() ）

canvas标签在chrome中生成黑色块: 这非常令人沮丧。如果我没有设置canvas的高度和宽度，canvas画得很好，但是当我设置高度和宽度时，我会得到一个黑盒子。我已经将我的代码剥离到疯狂的程度，并且找不到任何问题。 canvas标签在FF和IE9中运行良好。 var canvas = document.getElementById(‘can1’); var ctx = canvas.getContext(‘2d’); canvas.width = 280; canvas.height = 270; ctx.clearRect(0, 0, canvas.width, canvas.height); 即使只是这样也会破坏Google Chrome中的canvas。无论我绘制多少，如果设置了高度或宽度，它都会失败。如果我用css设置高度或宽度，它会产生扭曲的结果。有任何想法吗？更新：我发现如果我的canvas足够小，它可以在chrome中使用。但是我需要一个280×270而不是100×100的canvas

在javascript中在canvas中生成随机图像: 美好的一天，我正在尝试使用canvas制作一个javascript游戏。我想生成随机的敌人物体。到目前为止，我发现这是一个产生的例子： JSFiddle Demo 如何加载图像而不是球？任何帮助都会很棒。 TNX。 // get a refrence to the canvas and its context var canvas = document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); // newly spawned objects start at Y=25 var spawnLineY = 25; // spawn a new object every 1500ms var spawnRate = 1500; // set how fast the objects will […]

jsPlumb在调用setPaintStyle（）时删除直接连接: 我正在使用jsPlumb进行中型项目。虽然文档在可靠的解释方面很小，但我已经设法完成了项目，现在我已准备好提供它。在交货日期之前，我被要求将连接线笔直而不是弯曲。我认为这就像在jsPlumb connect方法中添加一个关键字一样简单： jsPlumb.connect({ connector: ‘Straight’… }) ……就是这样。所以有什么问题？我正在研究的这个项目必须允许用户“选择”连接线，然后按“删除”按钮清除他们选择的连接。我允许用户通过调用jsPlumb的setPaintStyle()方法来选择连接，如下所示： // Select/Deselect each connection on click jsPlumb.bind(‘click’, function (connection, e) { e.preventDefault(); connection.setPaintStyle({ strokeStyle: ‘red’ }); }); 仅当线条弯曲时才会按预期工作（默认为jsPlumb ）。但是，如果connect()方法中的connect() connector选项更改为“直线” ，则垂直连接线（它们的端点彼此相交）在我单击时会消失。其余的直线没有直接相互交叉的直线点没有这个问题。完全删除连接器选项，或将其值设置为“Bezier”，或者在选项设置为“Straight”时不调用setPaintStyle()方法，然后单击的行保持原样。这是一个jsBin示例： jsPlumb setPaintStyle（）与直线bug 最初我认为这是我的应用程序中的一个错误，但在花了很多时间之后我将问题跟踪到setPaintStyle（）方法。我非常有信心这是一个jsPlumb错误，但我并不完全确定。在这一点上非常令人沮丧，因为唯一能阻止我提供项目的是能够将笔触颜色更改为红色。如果我能用直线完成这个简单的任务，那么我可以前进。我已经考虑过自己定位SVG路径节点并改变这种方式的笔触颜色，但由于jsPlumb使用VML for IE8（ ie8是这个项目的要求），我不确定我能做到这一点。有什么建议？

canvas图像无法在Chrome中呈现（适用于FF4和IE9）: 我很难过。对于我的生活，我不知道为什么这不适用于Chrome。你可以在这里看到代码： http://jsfiddle.net/corydorning/NgXSH/ 当我在FF或IE9中提取此代码时，它工作得很好。您会注意到小提琴将在Chrome中与渲染元素一起使用，但它不能在小提琴之外工作。任何帮助是极大的赞赏。这是我第一次尝试使用canvas。

用canvas制作矩形叠加图像: 我想用HTML5 canvas来达到以下目的：我的代码： jsfiddle // Options var maxImageWidth = 250, maxImageHeight = 196, radius = 50; var canvas = $(‘#ddayCanvas’), canvasWidth = canvas.width(), canvasHeight = canvas.height(), sectorColor = $(‘.product-box’).css(‘background-color’), context = canvas[0].getContext(‘2d’), imageSrc = canvas.data(‘image’); function drawDday (option) { var imageObj = new Image(); imageObj.onload = function() { if (option == ‘clip’){ context.save(); context.clip(); } […]