我是HTML5画布的新手，我正在玩this example
然后我想在单击颜色选择器时更改笔划的颜色
$("button").click(function()
{
console.log("click");
stroke_color = "#0000FF";
});
如果在画布上点击一下我会看到新颜色，但是如果我开始移动鼠标来创建一条线，那么笔划的颜色就是我先定义的颜色。
如何动态更改颜色？
这是fiddle的链接(虽然我没有让它发挥作用)
HTML
change color!
JS
var stroke_color = "#FF0000";
$("button").click(function()
{
console.log("click");
stroke_color = "#0000FF";
});
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#main');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;
sketch.appendChild(tmp_canvas);
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
// Pencil Points
var ppts = [];
tmp_canvas.addEventListener('mousemove', function(e) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = stroke_color;
tmp_ctx.fillStyle = stroke_color;
tmp_canvas.addEventListener('mousedown', function(e) {
tmp_canvas.addEventListener('mousemove', onPaint, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push({x: mouse.x, y: mouse.y});
onPaint();
}, false);
tmp_canvas.addEventListener('mouseup', function() {
tmp_canvas.removeEventListener('mousemove', onPaint, false);
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
// Emptying up Pencil Points
ppts = [];
}, false);
var onPaint = function() {
// Saving all the points in an array
ppts.push({x: mouse.x, y: mouse.y});
if (ppts.length < 3) {
var b = ppts[0];
tmp_ctx.beginPath();
//ctx.moveTo(b.x, b.y);
//ctx.lineTo(b.x+50, b.y+50);
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
tmp_ctx.fill();
tmp_ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.beginPath();
tmp_ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i++) {
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
tmp_ctx.stroke();
};