Question

我已经使用画布和<script>标签对多维数据集进行了编码。我想创建一个函数，在给定的时间范围内将单行的颜色从黑色变为灰色再变为白色。

var c = document.getElementById("myCanvas");
var ctxfii = c.getContext("2d");
ctxfii.beginPath();
ctxfii.moveTo(700, 415);
ctxfii.lineTo(700, 515);
ctxfii.lineWidth = 1;
ctxfii.strokeStyle = "black";
ctxfii.stroke();  

var colorChange = ctxfii;
function colorChange () {
    window.setInterval(10);
    document.getElementById("myCanvas").strokeStyle = "grey"
};

什么也没发生，整个画布显示为空白。

Answer 1

我正在为strokeStyle的值从黑色rgb(0,0,0)到白色rgb(255,255,255)设置动画。为了使它从黑色变为灰色，再由白色变为灰色和黑色，我使用了Math.abs(Math.sin(H)) * 255;

我使用requestAnimationFrame而不是使用setInterval

我也正在翻译上下文，因为我想看一行，但是您可以删除此部分。

var c = document.getElementById("myCanvas");
c.width = 400;
c.height = 400;
var ctxfii = c.getContext("2d");

// I'm translating the context because I want to see the line;
ctxfii.translate(-600,-400)

ctxfii.strokeStyle = "black";

drawLine();

let H = 0;
function colorChange () {
    requestAnimationFrame(colorChange);
    H+= .01;
    let h = Math.abs(Math.sin(H)) * 255;
    //delete everithing on the canvas
    ctxfii.clearRect(0,0,c.width,c.height)
    // I'm animating the strokeStyle from black: rgb(0,0,0) to white: rgb(255,255,255)
    ctxfii.strokeStyle = `rgb(${h},${h},${h})`;
    //redraw the line:
    drawLine();
};

colorChange()

// a function to draw the line; I'll need this function more than once
function drawLine(){
    ctxfii.beginPath();
    ctxfii.moveTo(700, 415);
    ctxfii.lineTo(700, 515);
    ctxfii.lineWidth = 1;

    ctxfii.stroke();  
}

canvas{border:1px solid;background:skyblue;}

<canvas id="myCanvas"></canvas>

如何创建将单行的颜色从黑色变为灰色再变为白色的函数？

1 个答案: