html5-canvas 相关问题

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

连接 <a> 元素以在 HTML 画布中绘制图像

我正在尝试使用下拉按钮列表在 HTML 画布中显示不同的图像。我将 href 设置为使用 javascript 以及画布下方的 img 和脚本,但是当您单击

回答 1 投票 0

为什么我在 svg 上看到边距?

我正在尝试将我的徽标添加到网页的标题中,但当我检查较小屏幕上的外观时,我不断看到 svg 周围有这个边距。 这是我的 html 文件 我正在尝试将我的徽标添加到网页标题中,但当我检查较小屏幕上的外观时,我不断看到 svg 周围有这个边距。 这是我的 html 文件 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>Restaurant</title> </head> <body> <header> <div id="logo"> <img src="img/logo.svg" alt=""> <p>RESTAURANT</p> </div> </header> </body> </html>type here 这是我的 style.css 文件 *{ margin: 0; padding: 0; /* border: 1px solid red; */ } body{ background-color: black; color: white; } #logo img{ background: white; } #logo p{ font-size: 16.2; font-family: sans-serif; font-weight: bold; margin-left: 35px; letter-spacing: 0.2px; } 这是 logo.svg 该文件包含我想要包含在标题中的徽标 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 70.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg> 在大屏幕上看起来不错 但在较小的屏幕上,svg 周围有这个边距 我尝试裁剪 svg 但没有成功 我能想到的几乎所有其他解决方案都失败了 您需要做的就是更改 svg 代码上的 viewBox="0 0 241.000000 27.000000" 和 transform="translate(0.000000,27.000000)" 部分,它只是一个额外的空间,因此如上所述减小大小将解决该问题 我已经编辑了你的 svg 代码,只需将其替换为下面的代码: <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 27.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,27.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13 2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14 122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19 -75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12 -106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41 10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29 -123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63 22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33 -72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22 11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0 -78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24 -5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4 -23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13 -11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104 -45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27 43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57 55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47 33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55 3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14 55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7 -8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/> <path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44 83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/> </g> </svg>

回答 1 投票 0

如何从平板电脑获取压力以与 HTML5-Canvas 一起使用

我想用我的平板电脑(HP Elitebook)在网页中绘图,并且我想创建一个可以在网络浏览器中使用的“画图”,如果可能的话使用 HTML5-Canvas。 我是平板电脑编程新手......

回答 3 投票 0

如何移动nextjs useState中创建的fabricjs对象?

当我在 useEffect() 中创建织物画布时,它不允许我移动添加的图像,但如果我在其他地方创建它(受 useState 异步问题的影响),它确实允许我正常移动。 ...

回答 1 投票 0

当我在 HTML 画布中添加新的弹力球时,如何阻止我的球被移动到随机位置?

我目前有一个程序,当您点击“添加球”按钮时,就会创建一个新球,并且它们会从墙壁和其他球上反弹。然而,假设您已经有另外两个平衡...

回答 1 投票 0

为什么div里面的canvas有垂直偏移?

为什么div里面的canvas有垂直偏移? Web 检查器不显示 div 和画布的任何边距或填充。 .外层{ 高度:100px; 宽度:200px; 边框:1px实线; } .内部{

回答 1 投票 0

如何在 HTML5 画布中剪切部分文本?

我有一个在 HTML5 画布上绘制的文本。如何剪切或隐藏行左侧的部分文本? 在此示例中,单词“HELLO”的部分被剪裁到红色的左侧...

回答 4 投票 0

canvas html5 中的事件模糊

当我在此画布上失去焦点时,我正在尝试将事件监听器添加到我的画布中。 我有两块画布: 在第一个画布(左侧)中,我画了一个签名,当将焦点更改到右侧画布时,我

回答 1 投票 0

如何将一个网页上的画布复制到另一个网页

我正在尝试从网页获取画布并将其显示在其他地方。 画布本身无法通过 URL 获取,我获取网页并从那里抓取画布。 话虽这么说,当

回答 1 投票 0

HTML 标题标签

我们可以在网页中使用多个标签吗?如果不是那么为什么不呢? 不过,我在网页中使用多个 标签时是否有任何警告或任何问题。这是一个好的做法还是... 我们可以在网页中使用多个 <h1> 标签吗?如果没有那为什么不呢? 我在网页中使用多个 <h1> 标签是否有任何警告或任何问题。在网页中使用多个标题标签是一个好习惯还是好主意?结构正确吗? 我正在学习 html,我了解到从 h1 到 h6 有六个 hading 标签,所以我认为使用相同语义的多个标题标签是可能的或者是一个很好的做法。 我正在尝试在网页中添加多个具有相同语义的标题标签。它工作正常。我想知道在网页中使用多个相同语义的标题标签是一个好习惯吗? 添加多个标签是完全可以的。但是,您可能希望确保每个标签位于文档中的单独部分/主题中(以实现可访问性、可维护性和 SEO)。

回答 1 投票 0

Fabric.js 使用控制处理程序进行图像操作,当图像被裁剪和缩放时,下一个裁剪操作不会应用于之前的状态

在给定的fabricjs代码中,我正在使用图像控制处理程序开发裁剪和缩放功能。当图像第一次缩放然后裁剪时,在这种情况下它工作正常。然后

回答 1 投票 0

如何通过mousemove事件读取React-Leaflet中ImageOverlay的像素值?

我试图在每个鼠标移动事件上读取 React-Leaflet 中 ImageOverlay 的像素值。我想使用 canvas API 读取像素值并在粘性工具提示中显示 RGB 值。可以...

回答 1 投票 0

严格模式下的ImageData数据分配

假设我有这样的 PoC 代码片段,用于处理画布原始像素数据 (功能(){ '使用严格'; var img = document.createElement("canvas").getContext("2d").getImageData(0, 0, 1, 1); ...

回答 4 投票 0

用js给黑白图片添加彩色滤镜?

是否可以在黑白图像中添加彩色滤镜? 例如,假设我想在游戏中使用此图像作为粒子:粒子图像 我可以用

回答 4 投票 0

画布仅在重新渲染后才加载叠加层

我正在尝试创建一个画布,它将拍摄视频,然后添加自拍分割,最后添加叠加。当以下代码运行时,我可以看到视频元素、带有视频的画布和

回答 1 投票 0

canvas的drawImage函数如何将YUV转换为sRGB

我使用网络编解码器,发现当我手动将 NV12 格式转换为 RGB 格式时,我得到的值与简单地将 VideoFrame 写入画布并读取 ima 时得到的值略有不同...

回答 1 投票 0

Javascript:将存储为 Uint8Array 的 PNG 渲染到没有数据 URI 的 Canvas 元素上

我正在尝试渲染存储在 javascript Uint8Array 中的 PNG 图像。我最初尝试的代码如下: var imgByteStr = String.fromCharCode.apply(null, this.imgBytes); 变种

回答 3 投票 0

在非透明图像周围修剪-10px

有没有一种方法可以精确修剪 HTML5 Canvas 中不透明图像的边缘? 例子: 输入: 输出:

回答 1 投票 0

使用canvas 2d绘制垂直箭头

我正在尝试使用canvas和javascript绘制垂直箭头。我能够画一个箭头向上的箭头,但发现很难将箭头放在底部。 我正在尝试的代码 我正在尝试使用canvas和javascript绘制一个垂直箭头。我可以画一个箭头向上,但发现很难将箭头放在底部。 我正在尝试的代码 <!DOCTYPE html> <html> <body> <canvas id="c" width="500" height="500" style="border:1px solid grey"></canvas> <script> const ctx = document.getElementById("c").getContext("2d"); drawArrow(ctx, 300, 300, 300, 200); function drawArrow(context, fromx, fromy, tox, toy) { const headlen = 10; // length of head in pixels const angle = Math.atan2(toy - fromy, tox - fromx); context.beginPath(); context.moveTo(fromx, fromy); context.lineTo(tox, toy); context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); context.moveTo(tox, toy); context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); context.stroke(); } </script> </body> </html> 正在画一个这样的箭头 我需要的是相同的箭头,它将放置在底部向下。 箭头生成在您找到的代码中已经是动态的。您所需要做的就是更改开始和结束位置的坐标。 改变 drawArrow(ctx, 300, 300, 300, 200); 至 drawArrow(ctx, 300, 200, 300, 300); 这是一个工作示例: const ctx = document.getElementById("c").getContext("2d"); drawArrow(ctx, 300, 200, 300, 300); function drawArrow(context, fromx, fromy, tox, toy) { const headlen = 10; // length of head in pixels const angle = Math.atan2(toy - fromy, tox - fromx); context.beginPath(); context.moveTo(fromx, fromy); context.lineTo(tox, toy); context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); context.moveTo(tox, toy); context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); context.stroke(); } <canvas id="c" width="500" height="500" style="border:1px solid grey"></canvas>

回答 1 投票 0

使用平移系统在Vue Canvas中实现无限网格点

我目前正在努力在我的 Vue 应用程序中向画布添加平移系统。虽然我已经成功实现了平移系统,但我面临着渲染无限点网格效率的挑战......

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.