我使用canvas标记和Javascript代码绘制一个矩形： var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); 对于fillRect方法，如果我为宽度和高度提供较大的值，我注意到它们不会被应用，例如： ctx.fillRect(0,0,1000,1000); 将给出如下内容：
我使用的是一个导入的png，带有一个alpha渐变，我将其设置为一个遮罩，以显示指定给它的位图。遮罩对象是可拖动的（有点像手电筒）。我知道我应该使用AlphaMaskFilter作为其中一个过滤器，并且我知道我应该使用.updateCache（）。。。我只是不确定我是否正确使用了它们 var stage; var assetQueue; var bg; var bgMask; var container; var amf; $(document).ready(function(){ l
知道如何使用KineticJS将bg颜色添加到添加到stage的文本对象中吗？检查以下内容： 您可能必须添加一个背景对象（最好是一个矩形），并在该对象上使用fill属性，然后将文本对象放在该对象上 整个教程都在该链接中 看看吧。我也在考虑同样的解决方案。在不使用rect的情况下，Bg color的文本对象是否有任何属性可用？我不认为您可以。。。。我认为这是唯一的办法。如果这对你有帮助，请检查答案：）+1是的，rect+text是为文本提供背景的方式。事实上，Kinetic.Label插件就是这
我是Phaser的新成员，我希望收到一些关于如何开始构建这种类型游戏的建议。欢迎提供任何示例、想法和教程。 提前谢谢 Phaser专注于2D图形，因此精灵位图tilemaps等。精灵可以旋转和缩放，因此通过缩放，您可以模拟3D透视图，如示例图像中所示。换句话说，只要你不需要改变4条车道的透视图（因此你不需要3D模型），你就可以在Phaser中制作这样的东西 Phaser特别适合动画用户界面和粒子效果。因此，通过使用内置等，在Phaser中为“完美”和“组合”文本以及底部的白色透明星星设置动画相
我想创建一个组，该组将包含图像和文本的组合，并将作为一个组进行操作，但是当我这样做时： 我不能移动那群人。要使其正常工作，我需要首先将图像和文本添加到画布，然后使用这些图像和文本创建一个组，然后删除单独添加的图像和文本 我做错了什么？最新版本的fabric.js似乎已经修复了这一问题。我能够让它工作： 我这样做是为了添加从计数器脚本动态生成的部分文本。 此代码将添加由图像和文本组成的组。文本设置为位于图像上方，在将文本添加到画布时，每次单击按钮，文本都会自动更新。因此，当您第一次单击按钮时，文
我有一个简单的sockets服务器（socket.io），通过它发送图像流，当在画布中设置像素数据时（使用putImageData），性能太低。我试着使用以下方法 阴影画布画出屏幕，然后回到主画布上 类型1）使用drawImage渲染屏幕外画布 类型2）使用屏幕外画布上的getImageData和主画布上的putImageData 类型3）使用屏幕外的createImageData并通过putImageData进行设置 在动画帧更新期间，使用requestAnimFrame更新UI 我还
我通过添加文本而不是图像来更改图像。 我想波浪是垂直向下的。我知道有一点编辑，但我尝试了不同的选择，但没有成功 var选项={ 期间：100， 挤压：0， 波长：40， 振幅：30， 底纹：300， fps:30 } var ca=document.getElementById（'canvas'）； var ctx=ca.getContext（'2d'）； ctx.canvas.width=400； ctx.canvas.height=150； ctx.font='bold 45pt Aria
我有这个代码（从网上偷来的）： 这在一定程度上是可行的。画布的宽度和高度设置为图像的大小，但仅显示图像的左上角-它似乎被拉伸，以适合分配给画布的所有空间（足以显示整个图像-615px 615px） 如果我添加一个 我使用的是Chrome浏览器，但在Firefox中看起来是一样的 提前谢谢 几点想法： 在使用图像之前，使用图像的onload方法为图像提供足够的加载时间 如果要使用css调整画布的大小，请不要这样做，而是调整画布元素本身的大小 下面是一些示例代码： var img=new Ima
你好，对不起，我的英语不好。我创建了一个循环“for”的对象，大约有200个对象在一个带有mouseover和mouseout的动态图像中。问题是，所有的物体都是好的，有了图像，问题是更多的东西不能很好地移动，我不知道为什么。不，给我一个javascript错误，只有一个警告图书馆。如果有任何人可以用鼠标检查一组有图像的对象 CREATE OBJECTS---> for (var j=0;j<datos.length;j++){ // iconos[j]= new ico
我想将Kinetic.Tween应用于HTML元素，比如。 有没有办法在kineticJS中获取元素 我尝试过使用getById和getByName，但没有成功 我有一个像这样的覆盖文本的图像 <div id="helplayer"> <img src='images/help.png' alt="help"/> <div class="overlay"> <h1><i>Instructions<
我已经为我的问题准备了一份完整的报告- 对于棋盘游戏，我尝试在两侧使用jqueryui按钮，并将屏幕的其余部分分配给Pixi绘图区域 我发现一位Pixi.js开发人员提出了一个建议，可以自动缩放其子项，下面我将尝试实现它： $（函数（）{ var宽度=400； var高度=400； var比率=宽度/高度； var scaleX=1， scaleY=1， offsetX=0， offsetY=0， oldX，oldY； var app=新的PIXI.Application({ 宽度：宽度，
在使用emscripten 2.0.8的大型项目的代码中，函数尝试检索特定画布的DOM元素的大小，以便进行初始化 double w=0, h=0; emscripten_get_element_css_size(canvasCssSelector, &w, &h); 但是我用一个日志监控这些值，它们与我在浏览器中得到的大小根本不匹配。更令人困惑的是，当我调整窗口（和画布）的大小时，大小从未改变。它只是保持不变为300x150（可能是某个地方的代码初始化或默认值，但对于实际的DO
在我尝试easeljsjavascript库时，我编写了一个短页面以打印一个蓝色方框。不幸的是，我在Ubuntu12.04主机上用Chromium对它进行了测试：但它没有显示任何内容。此外，Chromium的开发人员控制台未检测到任何错误： index.html <!DOCTYPE html> <html> <head> <title>Drag'n drop sur un carre</title> <script src=
我正在使用带有openstreetmaps的传单在Ext js面板上生成地图。 由于地图在openstreet地图中以分幅形式出现，我需要组合这些分幅来创建一个图像，以便另存为图像。您可以使用 使用Javascript和PHP将传单映射保存到PNG示例 我使用所谓的平铺缝合方法（服务器端）来实现这一点。步骤如下： 在客户端，收集文档中的所有平铺图像，例如使用jQuery，您可以执行以下操作： $('[class^="leaflet-tile leaflet-tile-loaded"]')
我正在尝试给条形图上色，但除了按键正常外，所有的条形图都显示相同的颜色 window.onload = function () { var bar = new RGraph.Bar('canv1', [20,17,13,7,5,1,1,1,1,1,1,1,1,1,1]) .Set('labels', ['M1','M2','M3','M4','M5','M6','M7','M8','M9','M10','M11','M12','M13','M14','M15'])
我想在画布上通过动画将图像向下移动三次，每次10像素。 例如code.org游戏 这样地！！！ 如何在画布中移动图像HTML5画布工作。。。好就像一幅真正的画布。你可以很容易地把颜料放在画布上，但是移动颜料是很困难的。改变它的最好方法就是把它画出来 当你把东西画到html5画布上时，它不再是一个对象，而是一堆RGB值。在画布中处理动画的常用方法是清除画布并重新绘制整个场景。如果我绘制矩形，谢谢您的回答！可以将矩形向右移动10px三次吗？？对于代码。。。。fori=0；i@Bin_JJANNG是
我有一个情况，我在网页中生成几个图形，并在画布中显示它们，我的要求是，单击下载按钮，我应该能够将所有画布图像导出为pdf 我已经使用html2canvas和Jspdf成功地为单个画布元素完成了这项工作，但我无法确定如何对所有画布元素执行相同的操作 我遵循这个JSFIDLE代码从Html2canvas和jspdf生成pdf 请提供帮助，提前感谢。不需要为此使用html2canvas。它只会以一定的成本为您提供另一个画布元素。您可以将原始canvas元素和toDataURL（）直接与jsPdf一起
我正在使用裁剪插件从中选择一个图像区域。使用公共URL src图像时，裁剪预览会起作用。当src是base 64字符串时，它不是。 一直在谷歌上搜索可能的原因，但没有运气。 代码如下所示： function updatePreview(c) { if(parseInt(c.w) > 0) { var img = new Image, src = $('.jcrop-holder img').attr('src'), cvs
我正在开发一个应用程序，其中用户出现并看到一个空白区域（div或canvas或其他什么，下面我们称之为mycanvas）。现在他从外面（一个div）拖动一些图像，并将它们放到我的画布上。他还可以调整它们的大小。而且，他还可以用铅笔和带有擦除功能的颜色在我的画布上画东西。现在，根据我到目前为止的研究，我发现绘图部分是纯HTML5画布。所以，没问题。但我不确定他是否可以将图像从外部div/canvas拖放到mycanvas。请告诉我如何在单个区域中实现所有三个功能（从外部拖放、用铅笔绘制、调整图像大
我有一个代码，结果是一支铅笔有淡入淡出的效果。我是根据例子做的。我现在正在一个移动网站上使用它和其他重型设备（WebRTC）。问题是，该代码使用计时器（setInterval（loop，1000/60）；）来创建淡入淡出效果，这似乎相当沉重 在HTML5/Canvas中有没有另一种（更轻的）方法可以使铅笔具有淡入淡出效果？看起来您已经完成了一个性能步骤，将框架图形移动到一个定时循环，而不是在移动处理程序中绘制 现在，您可以使用requestAnimationFrame（RAF）而不是setInt
我在Kineticjs中有一个层，其中有更多的形状，请参见附图： 我们可以将图层内容分为两部分： 1.对象（矩形） 2.可以缩放对象的选择节点（4个角）和可以旋转对象的旋转标志 我在层拖动上有事件处理程序（因为我需要同时移动所有元素），在缩放节点和旋转符号上也有事件处理程序。问题在于，当触发节点和旋转符号的拖动（结束、开始、移动）时，也会自动触发图层拖动事件 我尝试设置层。设置监听（false）然后返回到真，但没有结果。 在拖动缩放节点和旋转符号时，如何使层的事件不被触发 [编辑] 这里有一个U
使用kineticjs生成地图（通过画布生成svg路径） 使用kineticjs插件，地图生成成功 鼠标悬停时需要突出显示图层背景色吗 但我可以在鼠标悬停时显示警告框 jsfiddle.net/prasadraja07/dqhzjnut/4/ 您的节点位于层内。因此，您需要重新绘制“图层”： pathnorthen.on('mouseout', function () { //alert("mouse out"); this.fill('#00dddd'
我想知道如何使用kinetic js将画布中的文本转换为大写 以下是我的图形和文本画布代码： top_text_val = "INSERT TOP TEXT"; //Default top text on meme bottom_text_val = "INSERT BOTTOM TEXT"; //Default bottom text on meme var stage = new Kinetic.Stage({ container: 'meme-img', wid
我正在用HTML5画布编程一个2D游戏。因此，渲染所有对象和帧不会花费很多时间 我想问一下2D和3D游戏 假设我对其中一个对象进行了一次或多次更改。当我只需要重新绘制该对象时，是否应该渲染所有对象？渲染所有对象和帧是唯一的选项吗？如果游戏是3D的，渲染不会花费很多时间吗？特别是慢速互联网连接 因此[性能]仅取决于用户的浏览器和计算机 如果您正在制作一个同时在多台计算机上玩的游戏，那么连接速度很重要。除此之外，连接速度与最初下载游戏资源无关。更好的CPU/GPU、本地计算机上的内存将极大地影响应用
使用，如何链接两个可拖动层，使它们一起移动。 圆圈和文档图标是两个不同的层。我怎么买 a在同一层上绘制或b一起移动 // document .drawArc({ layer: true, groups: ['document'], fillStyle: 'yellow', x: 100, y: 250, radius: 50 }) .drawImage({ groups: ['doc
我创建了HTML5画布并添加了矩形电影（Movie1） 然后我为电影1制作了动画 但当我试图停止动画时，我不知道JS是如何工作的 AS3行动：框架1 trace (this.Movie1); this.Movie1.gotoAndStop(1); 我需要如何在JS上编写它 我用不同的方法检查，但都不起作用 this.Movie1.gotoAndStop(1); Movie1.gotoAndStop(1); 我打开控制台，看到 SCRIPT5007:无法获取未定义或空引用的属性“gotoAnd
我已经用chart.js创建了一个图表，现在我需要根据两个不同的数据集在图例中以不同的方式显示数据 如何以经典矩形/填充样式显示第一个数据集“低/高范围限制”，以点样式显示数据集“患者结果” （奖励：目前，我正在正确地显示第二个数据集。我还想用纯色“钢蓝”完全填充圆圈，而不是透明。） （我会提供一张图片，但我需要至少10个声誉来发布它们。） .chart容器{宽度：550px} var context=document.getElementById（'myChart'）； var myChar
“有没有办法在不覆盖drawFunc的情况下将某些内容（图像、其他图形）推送到Kinetic.js figure中？基本上没有，您必须扩展框架，以便将内容分组在一起。” 或者直接使用： Kinetic.Group(); 将事物组合到一个对象中。基本上不，您必须扩展框架，以便将事物组合在一起 或者直接使用： Kinetic.Group(); 将事物组合成一个对象。是的，您可以在KineticsJ旁边使用canvas函数。问题是，你必须为这个图形创建一个函数，这样每次重新绘制画布时，你的图形也会
我有一个带有鼠标悬停事件的简单画布。当用户移动鼠标时，我想在事件的x，y坐标处绘制一个像素（将来它将比单个像素更复杂）。本质上，它就像一个自定义光标 逻辑非常简单，如下所示。奇怪的是，虽然我正在清理旧的像素位置，但仍有像素的微小残余（自从我发布这个问题以来，我发现它与视网膜显示有关）。我已经能够解决这个问题了。我没有保存1px并还原1px，而是保存3px并还原3px。但我不明白为什么我需要这样做，将来当我画一个更复杂的光标时，我希望脏像素的处理是精确的 下面是一个可运行的JSFIDLE示例： 我
当我这样做的时候 var data = canvas.toDataURL("image/png"); window.open(data,"My Image","width=500,height=400"); 我准确地得到了画布上的东西 var data = canvas.toDataURL("image/jpeg"); window.open(data,"My Image","width=500,height=400"); 我得到了一个完整的黑色图像。有人能解释为什么会这样吗？还是我做错了什
我画了一组线，每一条线的宽度都是1。整个画布都有一个缩放比例，这样它们就可以相互叠加渲染 如果它们都是纯绿色（#00ff00），为什么重叠部分会变暗？屏幕截图和代码样本附件 这是因为直线是在其中心绘制的，因此每侧0.5个像素都会出血，从而强制进行子像素化，因此两条半透明直线会相邻绘制 要通过使用平移或向x位置添加偏移量来解决x位置偏移0.5像素的问题，请执行以下操作： var ctx=c.getContext（“2d”）； ctx.strokeStyle=“#00ff00”； //画一些随
有没有一种简单的方法可以将画布内容向左移动，删除最左边的像素并将所有其他像素向左移动？使用getImageData和putImageData可以轻松实现逐像素移动。例如： // shift everything to the left: var imageData = context.getImageData(1, 0, context.canvas.width-1, context.canvas.height); context.putImageData(imageData, 0, 0); /
我正在寻找一个解决方案，以显示在更大的画布较小的图像。想知道是否有一种方法可以在safari和chrome浏览器上的html5画布运行时将图像大小增加100%而不失真。也许 如果图像是基于矢量的，它的大小将加倍，并且几乎没有明显的失真 如果小图像是高分辨率的（例如300 dpi而不是传统的72 dpi），您可以在不明显失真的情况下将大小加倍 否则 尝试将图像放入图像元素中，并使浏览器的大小加倍。现代浏览器使用双三次插值并进行合理的缩放 把图片放到Photoshop里放大。尝试使用双三次平滑器和双
有没有办法让路径的不同部分具有不同的属性，特别是颜色？我想做的是下面的代码，但这段代码只会记住最后选择的颜色。我可以将其分解为单独的路径，但这样我就失去了让“线连接”属性创建平滑线的能力 var c = document.getElementById("canvasElement"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.lineWidth = 1; ctx.moveTo(50, 50); ctx.strok
我想用这种方式规范化单色图像像素，最小值为黑色，最大值为白色，中间的值按比例分布。 目前我在canvas中分两步完成，但我相信在WebGL中应该更快 我可以想象通过片段着色器操纵颜色，但我找不到任何有效的方法（1）确定图像的实际范围，也找不到（2）将此信息传递给另一个片段着色器的方法，然后可以执行灰度标准化。似乎可以在片段着色器中生成越来越小的纹理，并在每个纹理中写出最小值和最大值。因此，例如，如果您有一个16x16纹理，则每2x2像素写出一个表示最大值的像素 vec4 c00 = textu
如何定义context.shadowBlur？它似乎与线宽有关： var c=document.getElementById（“myCanvas1”）； var ctx=c.getContext（“2d”）； ctx.shadowBlur=20； ctx.shadowColor=“黑色”； ctx.strokeStyle=“红色”； ctx.strokeRect（20,20100,80）； var c=document.getElementById（“myCanvas2”）； var ctx=
我只是想在画布上用粗的抗锯齿笔划画一个圆 圆按预期绘制，但笔划的边缘非常粗糙。我一直在读Chrome强制抗锯齿，所以不知道该怎么做 小提琴： HTML <div id="main"> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas> <div id="counter" style="height: 100p
是否有可能根据半径，减少圆形中填充图案图像的宽度和高度 请告诉我。是的，您可以使用fillPatternScaleX和fillPatternScaleY属性来调整图案的比例因子
我试图更改createjs中的位图图像，并希望在单击“重置”按钮时删除容器中的所有子对象。但是removeAllChildren在我身上不起作用 function drawPhoneImage() { stage = new createjs.Stage('canvas'); container = new createjs.Container(); phone = new createjs.Bitmap(phoneImg); phone.x = 268; phone.y
我可以使用函数arc（）通过画布绘制仪表图表。但是，形状是半个圆 现在，我想画这样的标准图表（请忽略颜色或数字） 我怎么画呢？谢谢 更新： 我通过画两个弧来绘制图表（我不使用ctx.lineWidth） 但是，在min和max位置，图表是直线而不是圆形。我尝试使用ctx.lineCap='round'，但它不起作用。只需根据所需的仪表百分比以扫掠角度划过一个圆弧 在您的示例中，0%的角度是（估计…） 你的100%角度是（再次估算…） 所以你的弧总是从角度=π*0.60开始 圆弧将以如下计算
我在netbeans 8.0中创建了html/js/css应用程序。然后我在AdobePhoneGap中构建它。但在构建.apk文件后，它无法连接到数据库，即postgresql。我使用json调用netbeans 8.0 src包中的servlet。因此，请告诉我如何连接到数据库并在我的移动apk中获得响应
当我使用透明PNG时，ctx.drawImage（）不起作用，但当我使用常规PNG时，它起作用 var context = document.getElementById("canvas").getContext('2d'); .... function draw(img, x, y){ context.drawImage(img, x, y); } //actulaly there is loop here, but for simplicity I put only thi
我正在html5画布上工作，为此我使用konvajs和anglurjs。我想以更高的分辨率导出画布的可见区域 我可以使用stage.toDataURL（'JPEG'，1.0）导出可见区域，但它会重新提升图像的分辨率。它根据浏览器窗口设置图像尺寸，但我希望以与导入时相同的分辨率导出图像。有一个名为pixelRatio的stage.toDataURL（）的未记录配置： stage.toDataURL({ pixelRatio: 2}) 此命令将以更高的分辨率保存画布 演示：有一个名为pixelRa
是否可以指定属于此画布项的元素 var ctx1 = $("canvas.jqplot-xaxis-tick")[0].getContext('2d'); ctx1.fillText("Mycontent", 35, 7); 我在显示两个项目画布时遇到了一个问题，上面的代码总是覆盖项目2的内容。我想这样做： var ctx1 = [item1]$("canvas.jqplot-xaxis-tick")[0].getContext('2d'); Try by var
当SVG包含带有自定义字体的文本时，我在fabricjs中呈现SVG时遇到问题。 如何使用自定义字体使Fabricjs中的SVG正确显示 这是我的密码： var canvasObject=document.getElementById（“editorCanvas”）； //将画布设置为与div相等的大小 $（canvasObject）.width（$（“#canvasContainer”）.width（）； $（canvasObject）.height（$（“#canvasContainer
对于我的项目：我正在尝试设置对象捕捉和对齐准则。对于捕捉，这意味着当用户拖动对象时，如果对象的任何边接近与另一个对象边对齐，它将捕捉到位。在此期间，指南将作为用户的可视帮助显示 到目前为止，我正在实施由各种fabric.js贡献者完成的现有工作，发现如下： & 有效：在默认缩放（1）下，对象捕捉和对齐准则非常有效 失败：缩放（放大或缩小）时，视觉指引显示在错误的位置，但捕捉保持正确的功能 代码示例：移动对象。在默认缩放时，捕捉和指引效果很好。更改缩放级别（使用鼠标滚轮）并注意指导线的位置不正
我在画布上画不同颜色的正方形，大小固定为50px x 50px 我已经成功地为这些彩色方块添加了一个5px的透明内部笔划，但我这样做似乎有点过分了 ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, engine.cellSize, engine.cellSize); ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.fillRect(this.x, this.y, engine.cellSize,
我正在使用库从一个div中获取图像。该div包含图像的集合。所有图像均为300 dpi，但html2canvas的输出为72 dpi。 有什么方法可以在html2canvas的输出中保持300 dpi的图像质量 html2canvas（$（“#拼贴预览框”）{ onrendered：函数（画布）{ cartImage=canvas.toDataURL（“image/png”，1）； $（“#图像显示”）.attr（'src'，cartImage）； $（'.loader'）.remove（）；
我在chart.js中添加了这一行 ctx.textBaseLine = "bottom"; 但是不起作用 尝试textBaseline而不是textBaseline
我正在寻找一种方法，以编程方式设置舞台滚动动画。下面是我总结的一个例子（看看Konvajs的例子和文档）： 正如您所看到的，舞台是可拖动的，六边形运动是动画化的，因此它会从视口向右移动。动画停止后，可以通过向左拖动舞台来找到它 我要寻找的是，舞台/视口也可以沿着六边形滚动，这样当六边形停止时，舞台就位于视口的中心 有没有办法做到这一点 以下是jsbin中的代码： <!DOCTYPE html> <html> <head> <script sr