javascript - 触发javascript函数onclick

Question

我借助来自 mudcu 的脚本 sketch.js 创建了一个简单的绘画应用程序。

我在代码中进行了一些更改，但现在我遇到了触发设置铅笔颜色的函数的问题。

var Sketch = function(config) { "use strict";
var that = this;
...........
var ctx2 = layer2d[2];
// Style object.
this.zoom = 1;

this.style = {
    tool: "brush",
    globalAlpha: 1,
    globalCompositeOperation: "source-over",
    strokeStyle: "#000",
    lineWidth: 5,
    lineCap: "round",
    lineJoin: "round"

我的问题是当用户单击按钮时，如何将“this.style”strokeStyle 设置为例如“#D55151”？

Answer 1

使用 JQuery 可以很好地解决您的问题：

<button id="myBtn">My Button</button>

jQuery

$('#myBtn').click(function(){
  // set you style
  that.style.strokeStyle = "#D55151"; // var that = this;
});

更新：

纯javascript答案：

document.getElementById('myBtn').onclick=function(){
   // set you style
  that.style.strokeStyle = "#D55151"; // var that = this;
};

Answer 2

你可以加：

function(config, style) {
    this.style = style || this.style = {
            tool: "brush",
            globalAlpha: 1,
            globalCompositeOperation: "source-over",
            strokeStyle: "#000",
            lineWidth: 5,
            lineCap: "round",
            lineJoin: "round"
        };
}

并称它为

$("#somebutton").on("click", function() {
    Sketch({config}, {overides style});
});

或者如果您使用 jQuery 或下划线则更好：

function(config, style) {
    this.style = $.extend({
            tool: "brush",
            globalAlpha: 1,
            globalCompositeOperation: "source-over",
            strokeStyle: "#000",
            lineWidth: 5,
            lineCap: "round",
            lineJoin: "round"
        }, style);
}

我更喜欢第二种解决方案更安全......