相关疑难解决方法(0)
画布路径到底是什么,ctx.closePath()的用途是什么？
我正在开发HTML5游戏.我需要在画布上绘制尾线并检查游戏中的交叉点,这是一个Tron风格的游戏.
我实际上是在使用JCanvas中的drawLine()函数,但是JCanvas没有为我提供检查行交集的方法,我挖掘了源代码并发现使用了ctx对象,并且在我使用的函数的最后,我返回了对象,所以我可以使用该ctx.isPointInPath()方法来实现我需要的,但不工作,false每次都返回...
我真的不明白路径是什么 - 只ctx.isPointInPath()返回true使用ctx.moveTo()after 设置的点ctx.beginPath()？或者它将返回true连续ctx.moveTo()使用2个连续s 之间的所有点ctx.lineTo()？
有什么用ctx.closePath()？
有什么区别:
{
ctx.closePath();
ctx.fill();
ctx.stroke();
}
和:
{
ctx.fill();
ctx.stroke();
ctx.closePath();
}
推荐指数
解决办法
查看次数
贝塞尔曲线和椭圆的关系？
我想在 html5 画布中画一个椭圆，我在stackoverflow 中找到了一个很好的方法。但我还有另一个问题。
function drawEllipse(ctx, x, y, w, h) {
var kappa = 0.5522848;
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, …推荐指数
解决办法
查看次数
D3：慢速可缩放热图
我有这个可缩放的热图，放大或缩小时看起来太慢了。有没有什么可以让它更快/更流畅，或者它的积分太多了，这是我能拥有的最好的。我想知道是否有一些技巧可以让浏览器更轻，同时保持工具提示等增强功能。或者也许我的代码处理缩放功能不是很好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000000;
}
.x.axis path {
//display: none;
}
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
#tooltip {
position:absolute;
background-color: #2B292E;
color: white;
font-family: sans-serif;
font-size: 15px;
pointer-events: none; /*dont trigger events on the tooltip*/
padding: 15px 20px 10px 20px;
text-align: center;
opacity: 0;
border-radius: 4px;
} …推荐指数
解决办法
查看次数
如何使用 CSS 绘制 pacman 形状？
我想用 CSS 制作一个像图像一样的椭圆，但我做不到。
我用figma制作了那个椭圆（蓝色的看起来像“pacman”），figma并没有告诉我如何做椭圆的css，只有位置，我需要知道如何绘制椭圆。
另一个（有 3 层）我将使用它作为图像，因为我打赌它比第一个椭圆更难。
提前非常感谢！
推荐指数
解决办法
查看次数
将 SVG ARCTO 映射到 HTML Canvas ARCTO
推荐指数
解决办法
查看次数
如何用arc方法创建自定义圆？
我想自定义arc()功能,以便能够制作我自己的圆圈,但我不能让它画出扁平的圆圈.
我怎样才能做到这一点？
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"></canvas>推荐指数
解决办法
查看次数
标签 统计
canvas ×4
javascript ×3
css ×2
html ×2
html5 ×2
bezier ×1
css-shapes ×1
d3.js ×1
d3heatmap ×1
drawing ×1
html5-canvas ×1
jcanvas ×1
relationship ×1
svg ×1
zooming ×1