标签: canvas
使用canvas代替img有什么好处？
我目前正在构建一个移动应用程序，我只是想知道使用 canvas 或 img 标签是否更好（性能方面）。我将在我的网站上查询实际图像。只是想知道其中一种是否比另一种有好处。
推荐指数
解决办法
查看次数
HTML5 Canvas 中的桥接文本效果
想要创建Bridge Text Effect如下所示的内容，我尝试使用 arctext 但没有帮助。我尝试使用 google id 但它不理解 Bridge 文本形状。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '30pt Calibri';
// textAlign aligns text horizontally relative to placement
context.textAlign = 'center';
// textBaseline aligns text vertically relative to font style
context.textBaseline = 'middle';
context.fillStyle …推荐指数
解决办法
查看次数
哪个画布库可以实现缩放、平移、拖放？
基本上，我的应用程序至少需要执行以下操作：
- 拖放
- 缩放和平移
- 图像旋转
- 使用代码操作画布对象的能力
- svg 导入（如果可能的话，但并不重要）
我的要求非常基本，但是我的问题还是这些画布库的功能似乎如此有限？我知道画布规范不是最终版本，但我已经看到了一些令人惊叹的画布项目。
推荐指数
解决办法
查看次数
防止画布对象发生碰撞或交叉
我正在画布上绘制 n 个矩形。矩形是可拖动和可缩放的。我想防止它们重叠或相交。最好的情况是，如果它们只是相互咬合。
我想办法检查一下十字路口。在我的示例中，我将触摸对象的不透明度设置为 0.1。
巧合的是，在我尝试解决这个问题时，我的对象在接触另一个对象时无法释放。请参阅http://jsfiddle.net/gcollect/jZw7P/
这是因为第91行，警报没有执行。 alert(math.abs(distx));
实际上这是一种解决方案，但绝对不是一个优雅的解决方案。
有任何想法吗？
intersection canvas collision-detection html5-canvas fabricjs
推荐指数
解决办法
查看次数
HTML5画布如何将圆分割成X部分
我需要将圆分割成 X 个部分，没有白色中心
I have already this code: http://jsfiddle.net/U2tPJ/78/
我得到这个结果：
我需要这样的完成结果（没有白色中心）：
推荐指数
解决办法
查看次数
Tkinter .pack() 窗口未显示？
我一直在开发一个简单的程序，可以让按钮输出一些东西。但是当我运行它时，这个
（顺便说一句，我从互联网上得到这个）没有出现。是代码有问题还是什么？请帮助我，以便出现上面的窗口:)
代码：
from Tkinter import *
def asdf():
print('test')
tk = Tk()
b = Button(tk, text="test", command=asdf)
b.pack()
推荐指数
解决办法
查看次数
将多个画布保存为一张图像（制作像 PicFrame 一样的网站）
我尝试制作像 PicFrame 应用程序这样的网站，所以我找到了这个演示：
http://jsfiddle.net/appsaloon/4jRLM/
我想在演示中使用多个画布并将其保存到一张图像中。如何将所有画布保存为一张图像？抱歉我的英语不好，谢谢！
我的 HTML 代码如下所示：
<div id="container">
<input type="file" id="imageLoader_1" />
<canvas id="imageCanvas_2" width="400" height="200"></canvas>
<input type="file" id="imageLoader_2" />
<canvas id="imageCanvas_2" width="400" height="200"></canvas>
<a id="imageSaver" href="#">Save image</a>
</div>
推荐指数
解决办法
查看次数
html canvas 线宽无法正常工作
我使用 javascript 在画布上绘制了几条线，并且更改了 3 条不同线（两个轴、底部 10 条线和顶部 10 条线）的线宽值。当我更改lineWidth前 2 行的属性（lineWidth = 2.5 和 lineWidth = 1.0）时，它工作正常。但是，当我添加最后一个 lineWidth 属性 = 2.0 时，它不起作用并且发生了变化。我已将代码放在这个小提琴中。任何帮助将不胜感激。
http://jsfiddle.net/pwp2ps09/1/
<canvas id="graph" width="550" height="400"></canvas>
$(document).ready(function(){
var p= 50;
graph = $('#graph');
var g = graph[0].getContext('2d');
drawlines();
function drawlines(){
g.beginPath();
//brings cursor to the origin of this line graph
g.moveTo(p, graph.height() - p);
//creates x-axis
g.lineTo(graph.width() - p, graph.height() - p);
g.moveTo(p, graph.height() - p);
//creates y-axis
g.lineTo(p, p);
g.lineWidth = 2.5;
g.font = '12px Arial'; …推荐指数
解决办法
查看次数
了解屏幕外画布以提高性能
大家好，我有一个非常复杂的画布编辑器，允许用户使用 Konvajs 和 Gifler 库选择视频背景、添加文本、gif 和 Lottie 动画。它已经走了很长一段路，但是我正在尝试加快我的画布应用程序的性能。我已经阅读了很多关于屏幕外画布的内容，但我不太明白。假设我有一个常规的 HTML 画布对象，我将如何创建一个离屏画布并将其吐回浏览器？理想情况下，我希望能够以 30 fps 的速度从画布中以无延迟的速度从数组中获取图像。我还担心，根据caniuse.com 的说法，屏幕外画布似乎尚未得到广泛支持。每当我尝试从我的画布创建屏幕外画布时，我总是得到：
Failed to execute 'transferControlToOffscreen' on
'HTMLCanvasElement': Cannot transfer control from a canvas that has a rendering context.
正如我所说，我只是想弄清楚如何平滑地渲染我的动画，但不知道如何去做。这里的任何帮助都会很棒。这是代码。
<template>
<div>
<button @click="render">Render</button>
<h2>Backgrounds</h2>
<template v-for="background in backgrounds">
<img
:src="background.poster"
class="backgrounds"
@click="changeBackground(background.video)"
/>
</template>
<h2>Images</h2>
<template v-for="image in images">
<img
:src="image.source"
@click="addImage(image)"
class="images"
/>
</template>
<br />
<button @click="addText">Add Text</button>
<button v-if="selectedNode" @click="removeNode">
Remove selected {{ selectedNode.type }}
</button>
<label>Font:</label>
<select v-model="selectedFont">
<option value="Arial">Arial</option>
<option …推荐指数
解决办法
查看次数
如何使用javascript绘制建筑物一层的平面图
我想在 html 页面上绘制 2D 平面图。
我有一个如下所示的数据集。
数据集
{
floor:{
"id" : 2,
rooms:[
{
"id" : 21,
"x" : 0.0,
"y" : 0.0,
"height" : 15,
"weight" : 20
}
.
.
.
]
}
}
我想要一个类似于下图的计划
我想在悬停在房间上时添加工具提示。
有可以推荐的图书馆吗？
推荐指数
解决办法
查看次数
标签 统计
canvas ×10
html ×5
javascript ×5
image ×2
jquery ×2
fabricjs ×1
frameworks ×1
geometry ×1
html5-canvas ×1
intersection ×1
konvajs ×1
line ×1
mobile ×1
python ×1
svg ×1
tk-toolkit ×1
tkinter ×1
window ×1