html5-canvas 相关问题

Canvas是一个HTML元素，允许2D和3D中的2D形状，3D形状，位图图像和动画的动态，可编写脚本的渲染。

我有一个带有多个圆圈的画布，想将它们当作 1 来描画。正如你所看到的，这一切都是他们自己绘制的上下文.beginPath(); context.fillStyle = "#F9F8F3"; 继续...

javascript html5-canvas

回答 1 投票 0

我有一个相机视频源和一个画布。当用户单击“提交”时，画布会获取提要的图像我有一个相机视频源和一个画布。当用户单击“提交”时，画布会获取提要的图像 <video id="video" width="300" height="200" autoplay></video> </section> <section class="btn"> <button id="btnClick">Submit</button><br> </section> <section> <canvas id="canvas" width="300" height="300"> </section> 用户点击提交后，可以点击分享上传图片。 <input type="button" onclick="uploadEx()" value="Share" /> <form method="post" accept-charset="utf-8" name="form1"> <input name="hidden_data" id='hidden_data' type="hidden"/> </form> 我希望能够在用户通过单击共享按钮提交第一个快照之前在图像顶部覆盖另一个 png。上传图片的JS： function uploadEx() { var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL("image/png"); document.getElementById('hidden_data').value = dataURL; var fd = new FormData(document.forms["form1"]); var xhr = new XMLHttpRequest(); xhr.open('POST', 'uploadscript.php', true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; console.log(percentComplete + '% uploaded'); alert('Image uploaded'); } }; xhr.onload = function() { }; xhr.send(fd); }; 上传时如何在顶部叠加第二张图片（如水印）？这是使用临时画布的一种方法：创建临时内存画布：document.createElement('canvas') 将主画布绘制到临时画布上：tempContext.drawImage(mainCanvas,0,0) 添加一些重叠的文本（或其他内容）作为水印：tempContext.fillText('Mine!',0,0) 获取临时画布的dataURL：tempCanvas.toDataURL() 示例代码和演示： var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; var img = new Image(); img.crossOrigin = 'anonymous'; img.onload = start; img.src = "https://i.sstatic.net/ithV0ACj.png"; function start() { const canvasWidth = Math.min(img.width, 450); const canvasHeight = Math.min(img.height, 450); canvas.width = canvasWidth canvas.height = canvasHeight; ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); var dataURL = watermarkedDataURL(canvas, "It's Mine!"); } function watermarkedDataURL(canvas, text) { var tempCanvas = document.createElement('canvas'); var tempCtx = tempCanvas.getContext('2d'); var cw, ch; cw = tempCanvas.width = canvas.width; ch = tempCanvas.height = canvas.height; tempCtx.drawImage(canvas, 0, 0); tempCtx.font = "24px verdana"; var textWidth = tempCtx.measureText(text).width; tempCtx.globalAlpha = .50; tempCtx.fillStyle = 'white' tempCtx.fillText(text, cw - textWidth - 10, ch - 20); tempCtx.fillStyle = 'black' tempCtx.fillText(text, cw - textWidth - 10 + 2, ch - 20 + 2); // just testing by adding tempCanvas to document document.body.appendChild(tempCanvas); return (tempCanvas.toDataURL()); } body { background-color: ivory; padding: 20px; } canvas { border: 1px solid red; } <canvas id="canvas" width=300 height=300></canvas> <h2>Watermarked...</h2>

javascript html html5-canvas overlay watermark

回答 1 投票 0

Phaser 3：使用 TrueType (.ttf) 字体显示的文本呈现扭曲/模糊

我正在通过 CSS 和字体定义加载 .ttf 文件。然而，在游戏中，文字变得模糊。这是我首先尝试的（字体名称是truetypetest）： this.sampleText = this.scene.add.

html5-canvas phaser-framework

回答 1 投票 0

通过JS重叠播放音频

我有以下基于画布的游戏的 JS 代码。 var EXPLOSION = "声音/爆炸.wav"; 函数 playSound(str, vol) { var snd = new Audio(); snd.src = str； snd.体积=体积； snd.pl...

javascript html audio html5-canvas game-engine

回答 8 投票 0

Html Canvas 在渲染图像中添加文本或图像

我正在尝试在画布生成的图像中添加添加文本（水印）这是我的代码。 html2canvas($("#frame"), { onrendered：函数（画布）{ $("#outputImage").html(

html5-canvas watermark

回答 2 投票 0

如何在HTML5 Canvas中绘制具有动态旋转值的水印？

我正在使用 HTML5，我正在尝试使用文本在图像上绘制水印。我有以下代码：我正在使用 HTML5，我正在尝试使用文本在图像上绘制水印。我有以下代码： <html> <body onload="addWaterMarkOnPage();"> <div id="pageContainer" style="width: 612px; height: 792px;"> <canvas id="page1" width="612" height="792"></canvas> //image loading canvas </canvas> </div> </body> <html> JavaScript function addWaterMarkOnPage() { var watermarkCanvas=document.createElement("canvas"); watermarkCanvas.id="watermark"; var parentDivElement=document.getElementById("pageContainer") var parentCanvasElment=document.getElementById("page"); watermarkCanvas.width=parentCanvasElment.width; watermarkCanvas.height=parentCanvasElment.height; watermarkCanvas.setAttribute("style","position:absolute") if(parentDivElement.firstChild) parentDivElement.insertBefore(watermarkCanvas, parentDivElement.firstChild); else parentDivElement.appendChild(watermarkCanvas); var watermarkContext=watermarkCanvas.getContext('2d'); watermarkContext.globalAlpha=0.5; watermarkContext.beginPath(); var metrics = watermarkContext.measureText("WaterMark Demo"); var width = metrics.width; watermarkContext.rotate( (Math.PI / 180) * -45); //rotate 25 degrees watermarkContext.font = "72px comic Sans MS" ; watermarkContext.fillStyle = "Red"; watermarkContext.fillText("WaterMark Demo",-width*2,72); watermarkContext.fill(); } 我想在页面中对角绘制文本（“WaterMark Demo”）。我尝试了很多方法，但没有成功。这是一些改进的代码： var container = document.getElementById("pageContainer") var origCanvas = document.getElementById("page1"); var wmCanvas = document.createElement("canvas"); wmCanvas.id = "watermark"; wmCanvas.width = origCanvas.width; wmCanvas.height = origCanvas.height; wmCanvas.setAttribute("style", "position:absolute;border:1px solid black") if (container.firstChild) container.insertBefore(wmCanvas, container.firstChild); else container.appendChild(wmCanvas); var wmContext = wmCanvas.getContext('2d'); wmContext.globalAlpha = 0.5; // setup text for filling wmContext.font = "72px Comic Sans MS"; wmContext.fillStyle = "red"; // get the metrics with font settings var metrics = wmContext.measureText("WaterMark Demo"); var width = metrics.width; // height is font size var height = 72; // change the origin coordinate to the middle of the context wmContext.translate(origCanvas.width / 2, origCanvas.height / 2); // rotate the context (so it's rotated around its center) wmContext.rotate(-Math.atan(origCanvas.height / origCanvas.width)); // as the origin is now at the center, just need to center the text wmContext.fillText("WaterMark Demo", -width / 2, height / 2); <div id="pageContainer" style="width: 612px; height: 792px;"> <canvas id="page1" width="612" height="792"> //image loading canva </canvas> </div> 工作于：http://jsfiddle.net/EAXc9/7/ 深受启发：https://stackoverflow.com/a/5400970/2249185

javascript html html5-canvas

回答 1 投票 0

为什么 HTML canvas getContext() 方法名为 getContext() 而不是 setContext()？

基于此方法的使用方式，渲染上下文似乎是 html canvas 元素的“设置”。您可以将其设置为“2d”、“webgl”、“webgl2”或“webgpu” 对于

javascript html canvas html5-canvas

回答 1 投票 0

使用 Fabric.js 选择画布上的所有对象

有没有一种方法可以显式选择特定时间出现的所有对象。使用鼠标选择全部即可轻松完成此操作。是否有类似名为“选择...”的按钮的代码解决方案

javascript html5-canvas fabricjs

回答 5 投票 0

为什么我的代码有时会正确地影响 imageData.data，而有时会以意想不到的方式（随机）影响 imageData.data？

我有一个代码，应该通过分别对左上四分之一和左下四分之一应用拉普拉斯滤波器来影响图像。但这样做时，有时第二次应用...