草庐IT

canvas2d

全部标签

javascript - 如何在 html Canvas 上绘制 Font Awesome 图标 [版本 <5]

如何将FontAwesome字符(图标字形)绘制到html5Canvas上?我使用的是旧版本的FontAwesome。我如何设置那些绘制的字符的样式?varcanvas=document.getElementById('myCanvas');varcontext=canvas.getContext('2d');context.font='';context.fillText();语言:lang-htmlhtml>varcanvas=document.getElementById('myCanvas');varcontext=canvas.getContext('2d');context

javascript - 使用 Javascript 在 IE 中将 Canvas 下载到图像

下面的代码会将Canvas转换为图像,并在IE以外的浏览器中下载相同的内容(我使用的是IE9)。IE代码在新选项卡中打开数据URL。但是,它不可下载。if(navigator.appName=="MicrosoftInternetExplorer"){somehtml1=document.createElement("img");somehtml1.id="imgid";somehtml1.name="imgname";somehtml1.src=canvas.toDataURL("image/png");document.body.appendChild(somehtml1);win

javascript - 使用 javascript 的 Canvas 图像的亮度和对比度

我在标签中有一张图片varimg=newImage();ctx.drawImage(img,0,0,img.width,img.height);ecc...如何使用javascript更改此图像的亮度和对比度?谢谢 最佳答案 我知道至少有一个javascript库可以做到这一点,Pixastic用法可能如下所示。Pixastic.process(canvas,'brightness',{'brightness':60,'contrast':0.5,'leaveDOM':true},function(img){ctx.drawImag

javascript - 为什么 chrome 很难在 Canvas 上显示大量图像,而其他浏览器却不能?

我们正在使用HTML5Canvas,一次显示大量图像。这工作得很好,但最近我们遇到了chrome问题。在Canvas上绘制图像时,您似乎会达到性能迅速下降的某个点。这不是一个缓慢的效果,看起来你从60fps直接到2-4fps。这是一些重现代码://Helpers//https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/randomfunctiongetRandomInt(min,max){returnMath.floor(Math.random()*(max-min+1))+m

javascript - Javascript 中的空间 (2D) 声音

为了我的游戏需要,我需要2D声音。这意味着,发射器应该位于二维平面上的某个位置。我如何在Javascript中实现这种效果?我需要使用特殊的声音格式还是可以控制扬声器的音量?我想我可以达到每个扬声器有2个音量的地步,但我对如何在Javascript中为相同的声音应用不同的音量一无所知。 最佳答案 可以找到准确描述此操作的文章包括演示here.为了防止链接失效,我将在下面引用最相关的部分Luckily,WebAudioAPIcomeswithbuilt-inhardwareacceleratedpositionalaudiofeatu

javascript - 在 WebSocket 中接收 Blob 并在 Canvas 中渲染为图像

我正在构建一个简单的WebSocket应用程序,它将当前Canvas的二进制快照传输给其他监听器。当前Canvas快照使用WebSocket发送为:varimage=context.getImageData(0,0,canvas.width,canvas.height);varbuffer=newArrayBuffer(image.data.length);varbytes=newUint8Array(buffer);for(vari=0;i尝试将接收端的数据呈现为:varbytes=newUint8Array(blob.size);varimage=context.createIma

javascript - 使用 Javascript 和 HTML Canvas 创建类似于 Photoshop 的颜色选择器

我完全不精通计算机图形学,我需要创建一个颜色选择器作为javascript工具嵌入到HTML页面中。首先,查看Photoshop的调色板时,我将RGB调色板视为三维矩阵。我的第一次尝试涉及:varrgCanvas=document.createElement('canvas');rgCanvas.width=256;rgCanvas.height=256;rgCanvas.style.border='3pxsolidblack';for(g=0;g这会产生类似的结果我的想法是,与我在Photoshop和网络上看到的那些相比,这太线性了。我想知道这样的选择器中颜色映射背后的逻辑:我真的不

javascript - Canvas 中图像的 CORS 设置

我尝试使用Caman.js并从AmazonS3加载图像。Caman.js是一个用于生成图像效果的JS库,它通过将图像复制到Canvas对象并对数据进行各种像素操作来工作。看起来canvas有一些安全细节来限制javascript在数据来自外部服务器时访问像素数据的能力,除非该服务器在请求中传递一些安全凭证,或者跨源资源共享(CORS)).我以前从未遇到过CORS,正在尝试了解它,但我似乎无法让它正常工作。据我了解,为了避免Chrome中出现此错误:Unabletogetimagedatafromcanvasbecausethecanvashasbeentaintedbycross-or

javascript - 方法比较 : EaselJS vs Multiple Canvases vs Hidden Canvas for interactiveness

1.)我发现了一个名为EaselJS的CanvasAPI,它在为您绘制的每个元素创建显示列表方面做得非常出色。它们本质上成为Canvas上可单独识别的对象(在一个Canvas上)2.)然后我在http://simonsarris.com/上看到了关于这个可以拖放的教程,它使用了一个隐藏的Canvas概念来进行选择。3.)第三种方法,一种可行的方法,http://www.lucidchart.com/,这正是我想要实现的,基本上将每个形状都放在不同的Canvas上,并用于定位它们。有大量的Canvas。问题是,在http://www.lucidchart.com/上实现交互式网络图的最简

javascript - Canvas fillStyle 间隔透明/不透明

这段小代码间隔清除旧Canvas数据://startintervalctx.save();ctx.fillStyle="rgba(0,0,0,0.2)";ctx.fillRect(0,0,ctx.width,ctx.height);ctx.restore();//somedrawcodefornewgraph...//endinterval我的工作区域变黑了,因为我将黑色设置为填充颜色(rgba(0,0,0,.2)),但我需要透明背景,而不是黑色。我尝试使用globalAlpha和imagePutData但我失败了。我该怎么做? 最佳答案