标签: html5-canvas
如何为canvas HTML 的文本和背景设置不同的颜色？
我正在使用画布创建一个动态的命运之轮。每当我添加新项目时，它都会均匀地重新计算空间。我能够使用画布实现这一点。我知道这canvas.fillStyle = somecolor;会将我想要的颜色设置为正在创建的切片。我还想在每个切片中添加一些文本。但是，我无法找到一种方法让画布绘制与切片颜色不同的文本。这可能吗？
这就是我正在做的
const drawSlice = useCallback((deg: number, color: string, text:string) => {
if (!canvasRef.current) {
return;
}
const canvas: HTMLCanvasElement = canvasRef.current;
const ctx = canvas.getContext("2d");
const width = canvas.width;
const center = width/2;
const sliceDeg = 360 / wheelItems.length;
if (ctx) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.fillText(text, center, deg2rad(deg));
ctx.moveTo(center, center);
ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
},[wheelItems.length])
推荐指数
解决办法
查看次数
如何使用CSS或Javascript创建动画彩虹线？
我想要的效果看起来像这样 - >
我想知道在css/js中是否有更简单的方法可以做到这一点？或者是否有任何库来实现它？
如果形状不是直线而是不规则的曲线线怎么办？
推荐指数
解决办法
查看次数
如何使用 Javascript 在图像上绘制并捕捉到网格？
我想实现一个前端工具，允许用户：
- 在图像上追踪手绘区域
- 跟踪必须关闭
- 跟踪应对齐到网格（例如 32 x 32 像素）
我发现这个 JS 库 ( http://ianli.com/sketchpad/ ) 看起来非常好，可以满足要求。
我认为没有现成的图书馆专门满足我的需要，所以请随时就如何解决这个问题提出任何建议。
最终目标是输出映射到图像上的 ara 的 JSON（或其他坐标列表），但“分辨率”为 32 x 32 px。
跟踪的最终结果应如下所示：
推荐指数
解决办法
查看次数
为什么 box-sizing 不适用于 canvas 元素上的宽度/高度属性？
让我们考虑一下这段代码：
.canvas {
width:150px;
height:150px;
}
canvas {
box-sizing:border-box;
border:5px solid;
}<canvas height="150" width="150"></canvas>
<canvas class="canvas"></canvas>我们canvas定义了两个具有相同宽度/高度、相同边框和box-sizing:border-box. 我们可以清楚地看到，我们使用 CSS 属性的画布尊重box-sizing（边框从宽度/高度减少），但使用属性定义的第一个是忽略box-sizing（边框添加到宽度/高度）。
我首先认为它与属性的使用有关，但在使用imgor时似乎不像预期的那样工作iframe。
.canvas {
width:150px;
height:150px;
}
iframe,img {
box-sizing:border-box;
border:5px solid;
}<iframe height="150" width="150"></iframe>
<iframe class="canvas"></iframe>
<img height="150" width="150" src="https://picsum.photos/200/300?image=1069">
<img class="canvas" src="https://picsum.photos/200/300?image=1069">为什么canvas元素有这种行为？
经过一番搜索，我发现应该避免对画布使用宽度/高度属性，因为它会缩放画布并且不会像我们想象的那样调整它的大小。
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);canvas {
width: 150px;
height: 150px;
border:1px solid …推荐指数
解决办法
查看次数
如何更改 HTML 中标题的颜色？
这是我的 HTML 和 CSS，h1标题显示为蓝色，而不是红色，我不知道为什么？以及如何修复它？多谢
<!doctype html>
<h1>les planètes du système solaire <h1>
<h1><style type='text/css'>
body{
color:red;
background-color: black}
</style><h1>
<img src ='https://(jpeg link ....)'>
<h2>comme nous pouvons le constater<h2>
<h2><style type='text/css'>
body{
color:blue;
background-color:black}
</style><h2>
推荐指数
解决办法
查看次数
圆角圆环图 - 这可能吗？
我需要将其实现为圆环图 - 我四处寻找 css/svg/canvas 解决方案，但找不到任何可靠的方法。
我知道我可以让每个部分都有完全圆角，但这不是我想要的。
推荐指数
解决办法
查看次数
超出我想象的简单画布
<html>
<head>
<script>
function draw() {
var canvas = document.getElementById('draw');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
for (i=0,i<=700,i+=10){
ctx.beginPath();
ctx.moveTo(i,700-i);
ctx.lineTo(700-i,i);
ctx.stroke();
}
} else {
document.write("Hey idiot, whhich idiot browser you are using? No IE clan here!");
}
}
</script>
</head>
<body onload="draw();">
<canvas id="draw" width="700" height="700"></canvas>
</body></html>
谁能告诉我这个简单的代码不起作用的问题是什么？................................
推荐指数
解决办法
查看次数
如何在HTML5画布中绘制一个C？
我想获得一些如何用HTML5 canvas + Javascript绘制齿轮形状的技巧.
不导入图片,但实际上是自己制作图片.
我认为这将是某种循环,取决于你想要齿轮有多少牙齿等.
但我不知道trigonemetri的数学等.
推荐指数
解决办法
查看次数
旋转轮子代码 - 没有 javascript
希望构建这样的东西 - 旋转轮子 - 仅使用 HTML 和 CSS，不使用Javascript
寻找一些参考资料，甚至看看是否可以完成。
推荐指数
解决办法
查看次数
是否可以使用当前的 MDN 画布 2D API 函数在 userSpaceOnUse 坐标中使用 gradientTransforms 渲染 SVG 径向渐变？
我有一个 SVG：
<svg height="781.8" width="1077.15" xmlns="http://www.w3.org/2000/svg">
<radialGradient cx="0" cy="0" gradientTransform="matrix(-0.0664, 0.0141, 0.0063, 0.0288, 137.9, -123.45)" gradientUnits="userSpaceOnUse" id="gradient0" r="819.2" spreadMethod="pad">
<stop offset="0.0" stop-color="#ff0000" stop-opacity="0.34901962"/>
<stop offset="1.0" stop-color="#ff0000" stop-opacity="0.0"/>
</radialGradient>
<g transform="translate(309.85, 414.55) rotate(0, 600, 300)">
<path transform="translate(-125, -10)" d="M161.0 -139.65 L160.25 -139.45 160.8 -139.85 Q161.55 -140.4 163.6 -140.15 L161.0 -139.65 M92.55 -115.35 Q91.1 -122.1 97.5 -128.9 107.45 -139.25 134.7 -146.75 L142.55 -148.35 Q147.4 -149.25 152.3 -148.3 L160.45 -147.3 161.4 -147.25 159.25 -145.4 Q152.35 -139.0 152.35 -135.5 L152.4 -134.75 152.4 -134.6 151.85 …推荐指数
解决办法
查看次数