时间戳

首页 > 解决方案 > HTML5 Canvas lineTo() 每行颜色

canvas - HTML5 Canvas lineTo() 每行颜色

问题描述

我有一条有两点的线，它上升然后下降。我要做的是在渲染线条的下一部分时更改颜色。例如红色的lineTo，然后蓝色的lineTo。

这是我在小提琴中使用的示例，评论解释了我尝试过的内容： https ://jsfiddle.net/5utenwz3/9/

似乎当我在第 16 行更改颜色时，它也覆盖了第一部分的颜色（第 10 行）。是否可以在画布中独立于前一个片段为下一个片段着色？


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(100, 150);

// set line color for first part (red)
context.strokeStyle = '#ff0000';
context.lineTo(250, 50);
context.lineWidth = 10;
context.stroke();

// set line color for next part (blue)
context.strokeStyle = '#063C75';
context.lineTo(450, 90);
context.stroke();

// expectation: first part (upward) line is red. second part (downward) is blue
// reality: whole line is blue

标签： canvashtml5-canvas

解决方案

似乎工作：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.moveTo(100, 150);
// set line color for first part (red)

context.lineTo(250, 50);
context.lineWidth = 10;
context.strokeStyle = '#ff0000';
context.stroke();

// set line color for next part (blue)
context.beginPath();
context.moveTo(250, 50);
context.lineTo(450, 90);
context.lineWidth = 10;
context.strokeStyle = '#063C75';
context.stroke();

推荐阅读