使用 Javascript 或 Jquery 更改画布值

【问题标题】：Change Canvas Value using Javascript or Jquery使用 Javascript 或 Jquery 更改画布值
【发布时间】：2019-06-07 05:05:31
【问题描述】：

我是 javascript 和 jquery 的新手。我正在使用画布创建线性仪表，但我想使用 javascript 或 Jquery 更改数据值。下面的代码是使用画布的线性仪表...帮我解决这个问题

<canvas data-type="linear-gauge"
        id="gauge1"
        data-color-plate="#fff"
        data-color-bar-progress="#0000ff"
        data-width="200"
        data-height="250"
        data-major-ticks="0,300,600,900,1200,1500"
        data-value="600"
        data-min-value="0"
        data-max-value=1500,0
        data-bar-width="50"     
        ></canvas>

【问题讨论】：

标签： javascript jquery html css canvas

【解决方案1】：

试试这个：

$("canvas").attr("data-value", "YOUR NEW VALUE");

您可以用相同的方式编辑任何属性。

【讨论】：

【解决方案2】：

使用 jQuery 的 .data 方法。

$("#gauge1").data("value", "500");
console.log($("#gauge1").data("value"));

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<canvas data-type="linear-gauge" id="gauge1" data-color-plate="#fff" data-color-bar-progress="#0000ff" data-width="200" data-height="250" data-major-ticks="0,300,600,900,1200,1500" data-value="600" data-min-value="0" data-max-value=1500,0 data-bar-width="50"></canvas>

【讨论】：