Html 达特，为什么赢了'；我的身材没出现吗？

我试图使它在每个位置我的鼠标将要生成一个黑色的圆圈，但我不能让它显示，我知道我正在接收输入，但我不知道为什么我的东西没有显示出来？有没有我缺少的某种重绘方法？我尝试了很多东西，但我不太明白

requestAnimation

在这里是如何工作的

我做错了什么

import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';

CanvasElement canvas = document.querySelector('#myPaintCanvas');
CanvasRenderingContext2D context = canvas.getContext('2d');

//circle deminsions
var centerX;
var centerY;
var radius = 15;
var PI = 3.14;

void requestRedraw(){
  window.requestAnimationFrame(scribble());
 }

void scribble(pointX, pointY){
 print("MouseX: " + pointX.toString() + " MouseY: " + pointY.toString());


context.arc(pointX, pointY, radius, 0, 2 * PI, false);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = '#003300';
context.stroke();

}

void main(){
 canvas.onMouseDown.listen((onDown){

    StreamSubscription mouseMoveStream = canvas.onMouseMove.listen((onData){
     scribble(onData.client.x, onData.client.y);
    });

//to end my stream when the mouse is up
canvas.onMouseUp.listen((onData) => mouseMoveStream.cancel());
  });

}

---

最有可能的原因是画布的实际绘图维度与其作为DOM元素的维度不匹配（

canvas.width=500；

和

canvas.style.width=“500px”；

）

固定缩放+一些附加修复：

导入'dart:html'；
导入“dart:async”；
CanvasElement canvas=document.querySelector（“#myPaintCanvas”）；
画布渲染上下文2D上下文；
//圆尺寸
var-centerX；
var中心；
var半径=15；
var-PI=3.14；
无效涂鸦（点X、点Y）{
打印（“MouseX:+pointX.toString（）+”MouseY:+pointY.toString（））；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
弧（点x，点y，半径，0，2*PI，false）；
context.fillStyle='black'；
context.fill（）；
context.strokeStyle='#003300'；
stroke（）；
closePath（）；
}
void main（）{
画布宽度=500；
canvas.style.width=“500px”；
高度=500；
canvas.style.height=“500px”；
context=canvas.getContext（'2d'）；
canvas.onMouseDown.listen（（onDown）{
StreamSubscription mouseMoveStream=canvas.onMouseMove.listen（（onData）{
var rec=canvas.getBoundingClientRect（）；
涂鸦（onData.client.x-rec.left，onData.client.y-rec.top）；
});
//当鼠标移动时结束我的流
document.onMouseUp.listen（（onData）=>mouseMoveStream.cancel（））；
});
}

---

我添加了

context.clearRect

，以明确圆圈的位置<代码>上下文.beginPath（）和

context.closePath（）来防止圆之间的桥接
document.onMouseUp
而不是
canvas.onMouseUp
修复了鼠标按钮在画布外释放时出现的问题。
我刚刚将其添加到其中，它给出了一个错误，它说scribble（）不能是空的，但是，您还可以创建那种类型的函数吗？
requestAnimationFrame
将
RequestAnimationFrameCallback
作为其参数，即函数从num到void
typedef void RequestAnimationFrameCallback（num highResTime）scribble
的结果，即
无效
窗口。requestAnimationFrame（scribble（））您可以将它包装在
（\u）=>scribble（x，y）
中，然后它就可以工作了。