草庐IT

Canvas-EventSystem-Panel

全部标签

javascript - 销毁 chart.js 条形图以在同一 <canvas> 中重绘其他图形

我正在使用Chart.js库绘制一个条形图,它工作正常,但现在我想破坏条形图并在同一个canvas中制作一个折线图。我试过这两种方法来清除Canvas:vargrapharea=document.getElementById("barChart").getContext("2d");grapharea.destroy();varmyNewChart=newChart(grapharea,{type:'radar',data:barData,options:barOptions});第二种方式:vargrapharea=document.getElementById("barChart"

javascript - 上传 'canvas'图片数据到服务器

我需要将Canvas图像数据即时上传到服务器(数据库),即我需要创建一个表单并使用input=file,然后在没有任何用户交互的情况下发布图像数据。 最佳答案 FWIW,这就是我让它工作的方式。我的服务器在谷歌应用引擎中。我使用jQuery.post发送canvas.toDataURL()的输出作为发布请求的一部分。数据URL是base64编码的图像数据。所以在服务器上我解码并将其转换为图像importreimportbase64classTnUploadHandler(webapp.RequestHandler):dataUrlP

javascript - 使用 "toDataURL"方法转换 Canvas 时如何设置图像质量?

我想在将Canvas元素编码为jpg时设置品质因数。vardata=myCanvas.toDataURL("image/jpeg");它没有给我质量选项。我可以使用替代库吗?相关:不同浏览器使用的默认质量设置是什么? 最佳答案 函数的第二个参数是质量。范围从0.0到1.0canvas.toDataURL(type,quality);Here你有扩展信息而且我认为一旦转换就不可能知道图像的质量。正如你在这个feedle上看到的那样在控制台上打印值时获得的唯一信息是类型和图像代码本身。这是我编写的一段代码,用于了解浏览器使用的质量默认值

学习Canvas基础-绘制矩形

学习Canvas基础-绘制矩形canvas提供了三个API,分别是:1.绘制矩形rect(起点X,起点Y,绘制的矩形width,绘制的矩形height)但该方法不会出实际效果,需要配合fill()和stroke()方法让其显现。2.绘制一个填充的矩形fillRect(起点X,起点Y,绘制的矩形width,绘制的矩形height)3.绘制一个矩形的边框strokeRect(起点X,起点Y,绘制的矩形width,绘制的矩形height)4.清除指定矩形区域,让清除部分完全透明clearRect(起点X,起点Y,清除的矩形width,清除的矩形height)事例一rect(起点X,起点Y,绘制的矩形

javascript - 如何从 Three.js Canvas 中保存图像?

如何保存Thr​​ee.jsCanvas中的图像?我正在尝试使用Canvas2Image,但它不喜欢使用Threejs。因为Canvas只有在它有一个div来附加Canvas对象时才被定义。http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images 最佳答案 由于toDataURL是Canvashtml元素的一种方法,它也适用于3d上下文。但是您必须注意几件事。确保在初始化3D上下文时将preserveDrawingBuffer标志设置为t

javascript - 以编程方式在 <canvas> 的 fillStyle 中使用 RGBa 值?

使用,我想使用变量设置矩形的RGBa值。例如:ctx.fillStyle="rgba(32,45,21,0.3)";工作正常,但将其与变量一起使用:varr_a=0.3;ctx.fillStyle="rgba(32,45,21,r_a)";不起作用。显然fillStyle只接受一个字符串。那么如何使用一些变量而不是显式定义值来设置rgba值呢? 最佳答案 您只需连接r_a变量即可正确构建字符串:varr_a=0.3;ctx.fillStyle="rgba(32,45,21,"+r_a+")";

javascript - 使用javascript设置 Canvas 大小

我在html中有以下代码:我不想将width指定为800,而是调用JavaScript函数getWidth()来获取宽度,例如正确的语法是什么?因为我所做的不起作用。 最佳答案 你可以这样设置宽度:functiondraw(){varctx=(acanvascontext);ctx.canvas.width=window.innerWidth;ctx.canvas.height=window.innerHeight;//...drawingcode...} 关于javascript-使用

javascript - HTML5 Canvas 相机/视口(viewport) - 如何实际操作?

我确定这之前已经解决了1000次:我得到了一个大小为960*560的Canvas和一个大小为5000*3000的房间,其中始终只应绘制960*560,具体取决于玩家所在的位置。玩家应该总是在中间,但是当靠近边界时-那么应该计算最佳View)。玩家可以使用WASD或箭头键完全自由地移动。并且所有物体都应该自己移动-而不是我移动除玩家之外的所有其他东西,以创造玩家移动的错觉。我现在找到了这两个问题:HTML5-Creatingaviewportforcanvas有效,但仅适用于此类游戏,我无法为我重现代码。Changingtheview"center"ofanhtml5canvas似乎更有

javascript - 在 Canvas 中绘制 1px 粗线创建 2px 粗线

在这个jsfiddle中有一行的lineWidth为1。http://jsfiddle.net/mailrox/9bMPD/350/例如:ctx.lineWidth=1;但是画在Canvas上的线条是2px粗,如何创建1px粗的线条。我可以绘制一个矩形(高度为1像素),但我希望该线也适用于对Angular线。那么如何让这条线高1px?谢谢! 最佳答案 Canvas从半个像素开始计算ctx.moveTo(50,150.5);ctx.lineTo(150,150.5);所以从一半开始就可以解决固定版本:http://jsfiddle.n

javascript - 如何调整 html Canvas 元素的大小?

我有一个在html中静态定义的Canvas元素,具有宽度和高度。如果我尝试使用JavaScript动态调整它的大小(设置新的宽度和高度-在Canvas的属性上或通过样式属性),我在Firefox中收到以下错误:uncaughtexception:[Exception..."IllegaloperationonWrappedNativeprototypeobject"nsresult:"0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"location:"JSframe::file:///home/russh/Desktop/test.html::o