草庐IT

canvas_comment

全部标签

javascript - canvg 生成的 Canvas 在视网膜屏幕上模糊

我正在使用Raphael绘制对象,然后使用canvg将其传输到HTMLcanvas元素,以便我可以使用toDataURL将其保存为PNG。但是当我使用canvg时,生成的图像很模糊。例如,下面的代码产生了这个(顶部是raphael,底部是canvg):vartest=Raphael("raph_canvas",50,50);varrect=test.rect(0,0,50,50);rect.attr({fill:'#fff000','fill-opacity':1,'stroke-width':1})window.onload=function(){varcanvas_svg=test

javascript - 使用 putImageData 从 Canvas 上的像素数组绘制图像

我正在开发一个可以加密图像并在Canvas上重绘解密图像的项目。由于我对编码和编程还很陌生,我目前在重绘解密图像数据时遇到问题,它是R、G、B、A形式的像素阵列。我认为这可以通过简单地将数据放入ctx.putImageData(imgd,0,0);但是firebug告诉我这个值没有实现imagedata的接口(interface)。我已经发布了整个数组here.图片宽160像素,高120像素。有什么方法可以重新格式化数组,使其可以在Canvas上绘制吗? 最佳答案 使用Uint8可以更快:varcanvas=document.cre

javascript - 在 WebGL 与 WebGL 中模拟基于调色板的图形 Canvas 二维

目前,我正在使用2Dcanvas上下文以大约25fps的速率从JavaScript绘制生成的图像(从一个像素到另一个像素,但在生成的帧之后作为整个缓冲区刷新一次)。生成的图像始终是每个像素一个字节(整数/类型化数组),并且使用固定调色板生成RGB最终结果。还需要缩放以适应Canvas的大小(即:进入全屏)和/或根据用户请求(放大/缩小按钮)。canvas的2D上下文可以用于此目的,但我很好奇WebGL是否可以提供更好的结果和/或更好的性能。请注意:我不想通过webGL放置像素,我想将像素放入我的缓冲区(基本上是Uint8Array),并使用该缓冲区(一次)刷新上下文。我不太了解WebG

javascript - 传单js : draw POIs as canvas

我想用Leaflet画很多地理点。因此我想使用HTML5canvas来提高性能。我的数据源是geoJSON。正如我在Leaflet的文档中看到的那样,还不能将地理位置绘制为Canvas。varanotherGeojsonLayer=newL.GeoJSON(coorsField,{pointToLayer:function(latlng){returnnewL.Marker(latlng,{icon:newBaseballIcon()});}});我想我应该在这里Hook:pointToLayer:function(latlng){}有人知道如何将我的latlng对象绘制为Canvas

javascript - 使用可变纸张在 Raphael 中操纵 Canvas 背景颜色

我想将背景颜色设置为特定颜色。我使用以下代码://JavaScriptCodevarpaper=Raphael(200,350,320,200);paper.attr("fill","#f00");不知何故,这段代码不起作用。请帮忙,如何设置纸张的背景颜色? 最佳答案 实际上,完全可以为SVGCanvas设置背景颜色——这里需要注意的是,虽然Raphael控制Canvas内的所有元素,但它直接对Canvas本身提供的风格控制非常少。幸运的是,您可以通过canvas属性访问与Raphael纸对象关联的dom节点。这使得做这样的事情变得

javascript Canvas 检测点击形状

我对javascript中的点击功能有疑问。这是我的代码:varcanvas=document.getElementsByTagName("canvas")[0];varctx=canvas.getContext('2d');BigCircle=function(x,y,color,circleSize){ctx.shadowBlur=10;ctx.shadowColor=color;ctx.beginPath();ctx.arc(x,y,circleSize,0,Math.PI*2,true);ctx.fill();ctx.closePath();};varbigGreen=newB

javascript - canvas 已被跨域数据污染

我正在编写脚本(或一起编辑和破解东西)来编辑页面上图像的外观。我知道javascript的基础知识,但这是我第一次看Canvas。多多包涵我收到这个错误:无法从Canvas获取图像数据,因为Canvas已被跨源数据污染。所以这是我的代码片段抛出错误:varcanvas=document.createElement('canvas'),context=canvas.getContext('2d'),height=img.naturalHeight||img.offsetHeight||img.height,width=img.naturalWidth||img.offsetWidth||

javascript - canvas.getContext() 不是函数

目前正在研究如何将Coldfusion与Canvas进行交互。目前,由于javascript错误“canvas.getContext('2d');不是函数”,我被卡住了。Canvas必须位于div内:这是用来生成图片的javascriptvarcanvas=$('#svgbasics').svg('get').toSVG();varcontext=canvas.getContext('2d');varstrDataURI=canvas.toDataURL();Canvas2Image.saveAsPNG(canvas);项目的附加信息(如果需要):使用了以下库:1.7.2/jquery

javascript - 使用 fabric js 调整 Canvas 大小

这个问题在这里已经有了答案:CanvaswidthandheightinHTML5(3个答案)关闭8年前。该应用程序允许用户保存设计并发布,以便其他用户稍后查看。原始Canvas以width=700和height=600的比例保存。但是在显示Canvas时,我想调整Canvas的大小以适应(350,300)的尺寸。原来的一半。但是,如果我直接应用这些尺寸并加载宽度setWidth()和setHeight(),它会以原始比例加载。我只想显示新尺寸的Canvas。

javascript - 从视频帧在 Canvas 中绘制图像改变色调

我写了一个简单的脚本,从视频中提取一帧并将其绘制到Canvas上。我的问题是视频和绘制图像之间的颜色在变化。我将结果放在原始结果旁边,以便于查看。原来的在左边。顺便说一句,它在chrome浏览器上似乎更明显。我在OSX上进行的所有测试。这里是一个片段,左边是Canvas,右边是视频://Getourmaskimagevarcanvas=document.querySelector(".canvas");varvideo=document.querySelector(".video");varctx=canvas.getContext('2d');functiondrawMaskedVi