草庐IT

Canvas-EventSystem-Panel

全部标签

javascript - Canvas:动画贝塞尔曲线绘制

我正在尝试制作一条从左到右穿过Canvas的线。我仍处于实现该目标的早期阶段,我正在使用以下功能来执行逐步动画timer=window.setInterval(draw_line,30);我的绘图函数是这样的functiondraw_line(){context.fillStyle="#000";context.fillRect(0,0,canv.width,canv.height);context.beginPath();context.lineWidth=2;context.strokeStyle='#fff';//Wherep1,p2,cp1,cp2arepointobjects

jquery - 更改动画 Sprite 表时 HTML5 Canvas 挂起(逐帧视频播放)

我需要在使用HTML5的移动设备上播放具有透明背景的视频。在WindowsPhone上,我可以捕获视频标签的当前帧并将其显示在Canvas中。但这在Android和iOS设备上不起作用(我认为是出于安全原因?)我的解决方案是使用FFMPEG拆分.flv,然后将这些帧拼接成大图像,如Sprite表。问题是当我切换到新的框架表时动画“挂起”。我只是在视觉上和通过控制台检查了这个(当我更改当前的Sprite表行时通过日志记录。)我已经通过查看它在我更改Sprite表时如何挂起以及我如何不挂起来测试它只需一遍又一遍地循环同一张纸。我预先加载了所有图片:varframeImages=[];for

javascript - html2canvas 保存为 jpeg 而无需在浏览器中打开

我正在尝试创建一个截屏按钮,用于创建用户的document.body图像。理想情况下,用户可以选择在本地将图像保存为.jpeg。我即将使用html2canvas创建我需要的功能图书馆。functionscreenGrabber(){html2canvas([document.body],{logging:true,useCORS:true,onrendered:function(canvas){img=canvas.toDataURL("image/jpg");console.log(img.length);console.log(img);window.location.href=i

javascript - 如何只画垂直线和水平线(Canvas)

我想用html5canvas做一个画图工具,只能画横线和竖线例如,无论我以何种方式拖动鼠标,它都必须绘制垂直线或水平线。下面我将展示一张图片,我将展示我需要的东西......谁能给我一些代码示例? 最佳答案 这是你必须使用一些逻辑或算法的事情。我在这里所做的是计算dx和dy,即x的变化并更改y。当x的变化更多时(dx>dy)保持你的y不变,反之亦然。这是我的代码HTMLJqueryvarprvX=-300;varprvy=-300;$('#myCanvas').bind("mousemove",function(e){varc=do

javascript - Canvas drawImage 在大图像上崩溃

我正在创建一个移动应用程序,用户可以从手机中选择一张图片,然后我对其进行模糊处理....问题是当用户选择大图片(超过2MB)时,应用程序。崩溃。JS代码:convert_local_image_base64:function(url,callback){varcanvas=document.createElement('CANVAS'),ctx=canvas.getContext('2d'),img=newImage;img.crossOrigin='anonymous';img.onload=function(){canvas.height=img.height;canvas.wid

jquery - 带有 html Canvas 的点图案

我目前拥有的是很多html元素,以及jQuery和css,用于创建具有基于鼠标移动的效果的圆点图案。这很难解释,所以我举了一个例子。http://jsfiddle.net/sebastianscholten/u6ebt390/varmX,mY,distance;functiontheDistance(elem,mouseX,mouseY){returnMath.floor(Math.sqrt(Math.pow(mouseX-(elem.offset().left+(elem.width()/2)),2)+Math.pow(mouseY-(elem.offset().top+(elem.

javascript - 将 Canvas 图像保存到服务器

我正在尝试将Canvas图像保存到服务器。我可以保存文件,但它始终为0字节。我的代码有什么问题?functiontest(){varcanvas=document.getElementById("cvs");vardataURL=canvas.toDataURL();$.ajax({type:"POST",url:"upload.php",data:{imgBase64:dataURL}}).done(function(o){console.log('saved');});}PHP: 最佳答案 首先,您必须确保在定义canvas变量

javascript - HTML5 Canvas 不会在任何方向绘制超过 2040 年的线条

编辑:在功能更强大的计算机上运行代码并正确呈现网格。可能的硬件限制?出现问题的计算机是Samsungseries3Chromebook。我认为这与尝试同时绘制太多线条有关。稍后测试。我正在尝试使用lineTo()方法在Canvas上绘制网格。线条在开始时正确绘制,但任何完全超过2048像素的线条(无论是向下还是向右)都不会显示。从该点内部到过去的线仍然显示在另一侧,只是仅绘制过该点的线不会显示。这是我的JavaScript:functiondrawGrid(){//data.tilesisthemapstoredasanarrayofarrays//tilesize=60varbw=d

javascript - 用 Canvas 创建三个圆形蒙版

我需要用Canvas创建一个圆形蒙版,我正在尝试这样做,但我做不到。我知道用Flash可以做到这一点,但我更喜欢不用这种技术:有人可以帮我解决这个问题吗?我不太了解javascript我需要的是在一张图片(Canvaswithbackgroundcolor)上创建三个不同大小的圆圈。我知道你不是来这里做别人的工作的,但无论我怎么努力,我都没有得到...... 最佳答案 您可以根据需要添加任意数量的圆,您必须仅指明位置和所需的半径:JavaScript:varcontext=document.getElementById('canva

javascript - 如何检测 Canvas 何时准备好进行操作?

我正在通过jQuery将Xcanvas元素动态添加到页面,如下所示:$(document).ready(function(){for(i=0;i.append()和.appendTo()都没有回调,因为它们应该立即发生。不幸的是,关于canvas元素的某些事情不会立即发生。当我转到其中一个Canvas元素上的.getContext('2d')时,它将失败并显示“getContext不是函数”。这发生在FF3.5和Chrome上。如果我将任意事件处理程序分配给Canvas元素,如.click(),并在该事件中使用.getContext(),它会完美运行。如何有效地确定Canvas是否已准