GWT Canvas：如何更改线条颜色

发布于 2025-01-07 09:57:02 字数 543 浏览 2 评论 0原文

由于 GWT 中的画布绘制已经遍布整个地图，所以让我明确地说我正在使用这个：

import com.google.gwt.canvas.client.Canvas;

问题是，如果我绘制一条黑线然后更改为红色，则第一行也会更改为红色。

// draw line in black
 context.moveTo(xScale(-0.5), yScale(0.0));
 context.lineTo(xScale(15.0), yScale(0.0));
 context.stroke();

 // change to red
 context.setStrokeStyle(CssColor.make(255,0,0));


 context.moveTo(xScale(0.0), yScale(20.0));
 context.lineTo(xScale(0.0), yScale(-20.0));
 context.stroke();

 // both lines appear in red

改变笔颜色的正确方法是什么？

原文

Since the canvas drawing in GWT has been all over the map, let me be explicit and say I'm using this:

import com.google.gwt.canvas.client.Canvas;

The problem is that if I draw a black line and then change to red, the first line is changed to red also.

// draw line in black
 context.moveTo(xScale(-0.5), yScale(0.0));
 context.lineTo(xScale(15.0), yScale(0.0));
 context.stroke();

 // change to red
 context.setStrokeStyle(CssColor.make(255,0,0));


 context.moveTo(xScale(0.0), yScale(20.0));
 context.lineTo(xScale(0.0), yScale(-20.0));
 context.stroke();

 // both lines appear in red

What is the correct method for changing pen color?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞慾 2025-01-14 09:57:02

在每个具有不同颜色的新形状/线条之前调用 context.beginPath() 应该可以解决您的问题。

// draw line in black
 context.beginPath();
 context.moveTo(xScale(-0.5), yScale(0.0));
 context.lineTo(xScale(15.0), yScale(0.0));
 context.stroke();

 context.beginPath();
 // change to red
 context.setStrokeStyle(CssColor.make(255,0,0));

 context.moveTo(xScale(0.0), yScale(20.0));
 context.lineTo(xScale(0.0), yScale(-20.0));
 context.stroke();

 // both lines appear in red

基本上 beginPath() 推动了状态

Calling context.beginPath() before each new shape/line with different color should fix your problem.

// draw line in black
 context.beginPath();
 context.moveTo(xScale(-0.5), yScale(0.0));
 context.lineTo(xScale(15.0), yScale(0.0));
 context.stroke();

 context.beginPath();
 // change to red
 context.setStrokeStyle(CssColor.make(255,0,0));

 context.moveTo(xScale(0.0), yScale(20.0));
 context.lineTo(xScale(0.0), yScale(-20.0));
 context.stroke();

 // both lines appear in red

Basically beginPath() pushed the state

回复收藏 0 原文

~没有更多了~