设置HTML画布弧线的属性

发布于 2024-10-08 21:51:10 字数 407 浏览 2 评论 0原文

我对 HTML5 和 canvas 还很陌生。我在画布上设置点是这样的：

var ctx = canvas.getContext("2d");
        for (var i = 0; i < 500; i++) {
            ctx.fillStyle = 'rgba(255,255,255,0.2)';
            ctx.beginPath();
            ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true);
            ctx.fill();
        }

有没有一种方法可以在绘制画布后，当我寻找“200”时，我可以识别特定的点并更改其颜色？或者重新绘制整个画布会更好吗？

原文

I'm still new to HTML5 and canvas. I'm setting points on a canvas as such:

var ctx = canvas.getContext("2d");
        for (var i = 0; i < 500; i++) {
            ctx.fillStyle = 'rgba(255,255,255,0.2)';
            ctx.beginPath();
            ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true);
            ctx.fill();
        }

Is there a way such that once the canvas is drawn, when I look for say, "200", I can identify the particular dot and change its color? Or would it be better to redraw the entire canvas?

分享到QQ

分享到微博

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

发布评论

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

表情可笑 2024-10-15 21:51:10

var canvas, ctx, points;
var radius = 10;
var num = 20;
$(function () {
    points = [];
    for (var i = 0; i < num; i++) {
        points.push({
            x: Math.random() * 300 >> 0,
            y: Math.random() * 200 >> 0
        });
    }
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext("2d");
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 300, 200);

    for (var i in points) {
        ctx.fillStyle = 'rgba(255,255,255,0.8)';
        ctx.beginPath();
        ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true);
        ctx.fill();
    }
});

var initrand = Math.random() * num >> 0;

function change() {
    var random = initrand;
    ctx.fillStyle = '#234263';
    ctx.beginPath();
    ctx.arc(points[random].x, points[random].y, radius, 0, Math.PI * 2, true);
    ctx.fill();
    initrand = Math.random() * num >> 0;
}

上述代码的演示

var canvas, ctx, points;
var radius = 10;
var num = 20;
$(function () {
    points = [];
    for (var i = 0; i < num; i++) {
        points.push({
            x: Math.random() * 300 >> 0,
            y: Math.random() * 200 >> 0
        });
    }
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext("2d");
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 300, 200);

    for (var i in points) {
        ctx.fillStyle = 'rgba(255,255,255,0.8)';
        ctx.beginPath();
        ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2, true);
        ctx.fill();
    }
});

var initrand = Math.random() * num >> 0;

function change() {
    var random = initrand;
    ctx.fillStyle = '#234263';
    ctx.beginPath();
    ctx.arc(points[random].x, points[random].y, radius, 0, Math.PI * 2, true);
    ctx.fill();
    initrand = Math.random() * num >> 0;
}