草庐IT

canvas_comment

全部标签

javascript - 在 Canvas 中围绕其中心旋转图像

我正在尝试在Canvas上制作我的第一个图像动画。我希望图像旋转,但我的代码中有些地方不正确。有任何想法吗?这一切都在准备好的jquery文档中:varcanvas=document.getElementById('logobg1');varctx=canvas.getContext('2d');varimg=newImage();//CreatenewImageobjectimg.src='images/containerbg.png';//Setsourcepath//setimgsrcimg.onload=function(){//whenimageloadsctx.drawIm

javascript - 你如何在 Safari 中的 <canvas> 标签上绘制文本

我一直在尝试使用用于绘制简单图表的标签,到目前为止,它非常容易使用。我想到一个问题。我不知道如何在上绘制文本在Safari中。在Firefox3.0中,我可以这样做:Chart.prototype.drawTextCentered=function(context,text,x,y,font,color){if(context.mozDrawText){context.save();context.fillStyle=color;context.mozTextStyle=font;x-=0.5*context.mozMeasureText(text);context.translate

javascript - 如何检测通过 Canvas 生成的图像是否为空白(透明 PNG)?

我正在开发一个应用程序,其中在HTML5Canvas上创建/编辑图像,然后保存到文件存储/云中。问题是“节约效率”。保存空白Canvas时,即使用toDataURL()发送完全透明的空白PNG。检测空白PNG的一种方法是在单击任何编辑/绘图功能时切换bool值,并在清屏时重置该值。但是,这种方法并非万无一失,因为用户可能会在单击绘图/编辑功能后保存图像,但不会绘制任何东西。是否有更native的方法来检测Canvas是否返回自浏览器打开以来已更改的二进制字符串?或者其他确保在客户端检测到空白透明PNG的方法? 最佳答案 HTML:脚

javascript - 在 Canvas 图中显示工具提示

我正在使用html5canvas元素绘制一个图形,其中的点表示here中的各个点。.我想在鼠标悬停的不同点上显示不同的工具提示。要显示为工具提示的文本将由用户提供。我试过但无法弄清楚如何将工具提示添加到图中的各个点。我用来显示点的代码是..//Drawthedotsc.fillStyle='#333';for(vari=0;i我应该在此代码中添加什么,以便我能够将用户输入显示为工具提示? 最佳答案 您可以在用户移到图表的数据点上时显示工具提示此工具提示只是第二个Canvas,它从链接的文本框中绘制文本并将其自身定位在数据点上方。首先

javascript - Paper.js 中的 Canvas 清除

有谁知道使用paper.js清除Canvas的最佳方法我尝试了常规的Canvas清除方法,但它们似乎不适用于paper.jsHTMLClearJavascript/纸质脚本//CreateaPaper.jsPathtodrawalineintoit:tool.minDistance=5;varpath;varc=document.getElementById("myCanvas");varctx=c.getContext("2d");functiononMouseDown(event){//Createanewpathandgiveitastrokecolor:path=newPath

javascript - 如何使用 jsPDF 和 HTML2Canvas 从网站获取多页 pdf?

我有一个脚本,它使用HTML2Canvas对页面内的div进行截图,然后使用jsPDF将其转换为pdf。问题是生成的pdf只有一页,而在某些情况下屏幕截图需要一页以上。例如,屏幕截图大于8.5x11。宽度很好,但我需要它来创建多个页面以适合整个屏幕截图。这是我的脚本:varpdf=newjsPDF('portrait','pt','letter');$('.export').click(function(){pdf.addHTML($('.profile-expand')[0],function(){pdf.save('bfc-schedule.pdf');});});有什么想法可以修

javascript - 基于 Canvas 的 Angular2 组件 : how to draw inside?

我编写了一个基于Canvas的简单组件,我正在使用伴随类(TypeScript代码)中的Input()属性调整其大小。我想做的是在配套类中绘制Canvas元素,其代码如下:实现该功能的最简单方法是什么?(请参阅代码中的注释:我想从构造函数中在Canvas内绘制一个蓝色矩形)。import{Component,View,Input}from'angular2/core';@Component({selector:'chess-diagram',})@View({template:``,})exportclassChessDiagram{private_size:number;constr

javascript - HTML5 Canvas 与 SVG + Raphael.js 的优缺点是什么?

我刚刚使用Canvas开始了一个项目。但我需要做的一件事是跟踪可移动的、可点击的框,如本例所示:http://raphaeljs.com/graffle.html所以我想知道Raphael-js+SVG是否会更好。你会用哪个?为什么? 最佳答案 这个答案是从我对另一个问题的回答中复制过来的。但是OP然后改变了问题,因此这个答案变得不那么相关了。恕我直言,它与这个问题更相关,所以这里是:将canvas和svg之间的区别想象成Photoshop和Illustrator(或者对于OSS用户来说是Gimp和Inkscape)之间的区别。一个

javascript - 使用 pdf.js 和 ImageData 将 .pdf 渲染到单个 Canvas

我正在尝试使用PDF.js阅读整个.pdf文档,然后在单个Canvas上呈现所有页面。我的想法:将每个页面渲染到Canvas上并获取ImageData(context.getImageData()),清除Canvas以执行下一页。我将所有ImageData存储在一个数组中,一旦所有页面都存储在其中,我想将数组中的所有ImageData放到一个Canvas上。varpdf=null;PDFJS.disableWorker=true;varpages=newArray();//Preparesomethingsvarcanvas=document.getElementById('cv');

javascript - 在 JavaScript Canvas 中沿直线移动一个点

假设我有一条线的坐标(25,3545,65,30,85-这将是一条分为两部分的线)。我需要每帧以恒定距离沿该线移动一个点(汽车)。我该怎么做? 最佳答案 嘿,所以你的2条线的坐标为(25,35)(45,65)(30,85),你要移动的点将放置在这些坐标(25,35)并且你希望它向第二个坐标(45,65)移动(第一条线段的末端)。第一步是获取点将要移动的方向,方向是点位置与目标位置之间的Angular。要找到这个Angular,您可以使用Math.atan2(),将targetpositionY-thepointpositionY作为