标签: canvas

我正在尝试使用鼠标事件在画布上画一条直线。我是java脚本的新手。有人可以帮助我或从我可以获得帮助的地方推荐一些东西吗？

是否可以填充二次曲线？

我是画布新手，我想填充我在 context.quadraticCurveTo() 中绘制的上部部分的颜色，但是当我尝试 context.fill() 时，它没有填充我的预期部分。我想填充画布的上半部分，该部分被笔划分开。

请参阅随附的片段。

const canvas = document.getElementById(\'canvas\');\r\nconst ctx = canvas.getContext(\'2d\');\r\nconst ch = canvas.height;\r\nconst cw = canvas.width;\r\n\r\n// Quadratic B\xc3\xa9zier curve\r\nctx.beginPath();\r\nctx.moveTo(0, 60);\r\nctx.quadraticCurveTo(ch, 0, cw, 35);\r\nctx.stroke();\r\nctx.fill();

#canvas {\r\n  border: 1px solid;\r\n}

<canvas id="canvas"></canvas>

\n

所以我有这两行代码-

1. canvas.item(0).set('src',url); canvas.renderAll();
2. canvas.item(0).setSrc(url); canvas.renderAll();

因此，现有画布的图像在第 0 层加载。因此，当我使用 Solution1 时，它应该更改图像。但它没有反映。当我尝试时console.log(canvas.item(0))，它显示url设置为src中的属性object array，但它从未反映。然后当我使用Solution2时，它就起作用了。但即便如此，它还是有问题。我必须运行 Solution2 两次然后它就会显示。有什么问题吗？

对于 VueJS 项目，我有一个带有 HTML5<video>标签的视频播放器。在此视频中，我想在左下角显示一些模糊点。

我使用的是画布、纯 CSS 方法，但这些都不起作用。

在CSS中：我在视频前面的div上使用了过滤器：blur(20px)，但它不起作用，模糊影响div的边框而不是中心。

css 中进行模糊测试的图像

对于画布，我们尝试了同样的方法，但我从未在其上得到任何单一的模糊效果

我只需要对图像的红色部分进行模糊效果：

红色部分需要模糊处理

<template>
<div>  
  <div class="contenant">
    <input  type='range' v-model="width" min="0" max="1281" value="0" >
    <img id='image' class="img" src="image1.jpg" alt="test">
    <div id='filtre' v-bind:style="{ width: width + 'px'}"></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    width: 0,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contenant {
  width: fit-content;
}

#filtre {
  height: 96%;
  background-color: red;
  position: …

我想在 WebGL 中绘制图像，但缩小了尺寸。当我不缩放它时，图像的质量很好，但如果我缩小它，那么图像的质量很差。

我从这里读到“在 WebGL 中处理高 DPI（视网膜）显示”： http: //www.khronos.org/webgl/wiki/HandlingHighDPI，我尝试做同样的事情。我在 WebGL 中的代码是：

        Initializations:

        var devicePixelRatio = window.devicePixelRatio || 1;

        gl.canvas.style.width = "800px";
        gl.canvas.style.height = "600px";

        canvas.width = Math.round(800 * devicePixelRatio);
        canvas.height = Math.round(600 * devicePixelRatio);


        For drawing:

        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        matrix = m3.scale(matrix, 28/800, 35/600); // matrix for scaling texture

        Textures:

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

但这并不具有与 HTML 图像相同的质量。我的 HTML 代码是：

        setTimeout(function() {

            var imagine = new Image();
            imagine.src = 'Tank.png';
            imagine.width …

我正在使用画布创建一个动态的命运之轮。每当我添加新项目时，它都会均匀地重新计算空间。我能够使用画布实现这一点。我知道这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])

所以，我有这个圆环图，在加载时会在图表段上显示数据编号。它使图表变得混乱，我找不到办法将其取出。我试过：

Chart.defaults.global.legend.display = false;

但是，这会删除图例，而不是图表上的标签。

那么，1）如何通过删除这些数据标签来清理图表？2）如图所示，图表在左侧和右侧被裁剪。我确实检查了画布的宽度和高度，看起来它有更多的空间可以生长。那么，为什么图表会被裁剪呢？

我想知道是否有办法获取画布中包含标签的所有项目。据我所知，该功能canvas.find_withtag(tag)只允许一个标签，我希望能够做到：canvas.find_withtag(tag0, tag1, ...)。基本上有一种干净的方法可以获取与多个标签匹配的物品，而无需使用套装。有没有一种干净的方法或者我必须使用 canvas.find_withtag(tag) 自己完成逻辑？

我实际上问的是是否有更好的方法来实现这一点：

itemstag1 = set(self.v_maps.canvas.find_withtag(tag1))
itemstag2 = set(self.v_maps.canvas.find_withtag(tag2))
for item in itemstag1 &itemstag2:
    self.canvas.itemconfig(item, fill=color)

我是自学成才的，正在尝试从基于文本的程序转向实际的游戏和应用程序，但我无法弄清楚/理解 Microsoft 的文档来创建画布。当我运行这段代码时，我得到的只是终端。这是我当前的代码，直接从 Microsoft 复制：

using System
using System.ComponentModel;
using System.Threading.Tasks;

namespace Practice
{
    class Canvas
    {
        public class Canvas : System.Windows.Controls.Panel
        {
            // Create the application's main window
            mainWindow = new Window();
            mainWindow.Title = "Canvas Sample";

            // Create the Canvas
            myParentCanvas = new Canvas();
            myParentCanvas.Width = 400;
            myParentCanvas.Height = 400;

            // Define child Canvas elements
            myCanvas1 = new Canvas();
            myCanvas1.Background = Brushes.Red;
            myCanvas1.Height = 100;
            myCanvas1.Width = 100;
            Canvas.SetTop(myCanvas1, 0);
            Canvas.SetLeft(myCanvas1, 0);

            myCanvas2 = new Canvas();
            myCanvas2.Background = Brushes.Green; …

我想为自定义画家画布中的线条画制作动画。到目前为止，我能做的就是在两个点创建两个圆，然后在这两点之间创建一条线。但我不知道如何为这条线设置动画，就好像它从一个点到另一点一样。我尝试过一些东西，但无法使其发挥作用。如果您有任何想法，请检查代码并建议我。

import 'package:flutter/material.dart';
import 'dart:math' as math;

class ProgressMonitorAnimation extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => _ProgressMonitorAnimationState();
}

class _ProgressMonitorAnimationState extends State<ProgressMonitorAnimation> with TickerProviderStateMixin {

  double _progress = 0.0;
  Animation<double> animation;

  @override
  void initState() {

    var controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);

    animation = Tween(begin: 1.0, end: 0.0).animate(controller)..addListener(() {

        setState(() {
          _progress = animation.value;
        });
      });

    controller.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Transform(
      alignment: Alignment.center,
      transform: Matrix4.rotationX(math.pi),
      child: CustomPaint(
        foregroundPainter: ProgressPainter(_progress),
      ),
    );
  }
}


class …