相关疑难解决方法(0)

我正在寻找一个允许在画布笔画上产生这种效果的代码.我已经有了一个动画圆形笔画,我只需要获得ANGLE渐变,而不是线性而不是径向.我只有3种颜色.现有一个可以在这里(将评分)

我试图使用HTML5 canvas API在点的路径上绘制连续的渐变,其中每个点都有自己的颜色.

请参阅http://bl.ocks.org/rveciana/10743959获取灵感,其中使用D3实现该效果.

似乎没有办法为单个画布路径添加多个线性渐变,所以我使用了这样的东西:http://jsfiddle.net/51toapv2/

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

var pts = [[100, 100, "red"], [150, 150, "green"], [200, 100, "yellow"]];

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.lineCap = "round";

for (var i = 0; i < pts.length - 1; i++) {
    var begin = pts[i];
    var end = pts[i + 1];

    ctx.beginPath();
    var grad = ctx.createLinearGradient(begin[0], begin[1], end[0], end[1]);
    grad.addColorStop(0, begin[2]);
    grad.addColorStop(1, end[2]);
    ctx.strokeStyle = grad;
    ctx.moveTo(begin[0], begin[1]);
    ctx.lineTo(end[0], end[1]); …

我是 HTML5 Canvas 的新手，我正在尝试绘制一个带圆角的三角形。

我试过了

ctx.lineJoin = "round";
ctx.lineWidth = 20;

但他们都没有工作。

这是我的代码：

ctx.lineJoin = "round";
ctx.lineWidth = 20;

var ctx = document.querySelector("canvas").getContext('2d');

ctx.scale(5, 5);
    
var x = 18 / 2;
var y = 0;
var triangleWidth = 18;
var triangleHeight = 8;

// how to round this triangle??
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + triangleWidth / 2, y + triangleHeight);
ctx.lineTo(x - triangleWidth / 2, y + triangleHeight);
ctx.closePath();
ctx.fillStyle = "#009688";
ctx.fill();
    
ctx.fillStyle = "#8BC34A";
ctx.fillRect(0, triangleHeight, 9, 126); …

这是我用来在画布上绘制圆形形状（然后在其上绘制图标位图）的内容：

private static Bitmap makeIcon(int radius, int color, Bitmap icon) {
    final Bitmap output = Bitmap.createBitmap(radius, radius, Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(output);
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(color);
    canvas.drawARGB(0, 0, 0, 0);
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT)
        canvas.drawCircle(radius / 2, radius / 2, radius / 2, paint);
    else
        canvas.drawRect(0, 0, radius, radius, paint);
    int cx = (radius - icon.getWidth()) >> 1; // same as (...) / 2
    int cy = (radius - icon.getHeight()) >> 1;
    canvas.drawBitmap(icon, cx, …