Image 如何使用画布改变直线的颜色？

我试着用工具来改变我想画的线的颜色

DIV是callcanvas

$(function() {
  $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
                $('#tools').append("<a href='#canvas' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
              });
              $.each([3, 5, 10, 15], function() {
                $('#tools').append("<a href='#canvas' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
              });

});

---

如何通过单击工具上的颜色来更改笔划样式？

如果画布的上下文可用并在全局范围内预先初始化，则可以执行以下操作：

$('#tools').append("<a href='#' onclick=\"context.strokeStyle = '" + this + "';return false;\" style='width: 10px; background: " + this + ";'></a> ");

然而，这远远不够优雅，最好添加一个事件侦听器并调用一个函数来设置

strokeStyle

同时更改此项以使上下文在全球可用：

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

canvas.addEventListener('click', drawLine, false);

//....

function drawLine(e) {

    //context = this.getContext('2d');  //not here..
    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    //...

context.strokeStyle = '#000000';

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

canvas.addEventListener('click', drawLine, false);

//....

function drawLine(e) {

    //context = this.getContext('2d');  //not here..
    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    //...