html画布里增添颜色,在HTML5画布中更改笔触颜色

我是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 = [];

/* Mouse Capturing Work */

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);

/* Drawing on Paint App */

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();

};