我正在尝试更改笔触的颜色（即连接两个点的线）。现在它是白色的，而默认情况下它应该是黑色的。另外，当我尝试使用styleStroke =“（any_color or RGB）”时，即使这样它也不会更改线条颜色。当“ lineWidth”属性正常工作时。
这是Java脚本代码：
<script>
$(document).ready(function() {
var condition = 1;
var points = [];//holds the mousedown points
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
this.isOldIE = (window.G_vmlCanvasManager);
$(function() {
/* */
if (this.isOldIE) {
G_vmlCanvasManager.initElement(myCanvas);
}
ctx.lineWidth = 2;
var imageObj = new Image();
imageObj.src = "1.jpg";
/* imageObj.crossOrigin = "Anonymous"; */
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
/* // Draw image onto the canvas */
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0);
var data1=ctx.getImageData(0,0,217,275)
};
/* // Switch the blending mode */
ctx.globalCompositeOperation = 'destination-over';
/* //mousemove event */
$('#myCanvas').mousemove(function(e) {
if (condition == 1) {
ctx.lineJoin = "round";
$('#posx').html(e.offsetX);
$('#posy').html(e.offsetY);
}
});
/* //mousedown event */
$('#myCanvas').mousedown(function(e) {
if (condition == 1) {
if (e.which == 1) {
var pointer = $('<span class="spot">').css({
'position': 'absolute',
'background-color': '#000000',
'width': '5px',
'height': '5px',
'top': e.pageY,
'left': e.pageX
});
/* //store the points on mousedown */
points.push(e.pageX, e.pageY);
/* //console.log(points); */
ctx.globalCompositeOperation = 'destination-out';
var oldposx = $('#oldposx').html();
var oldposy = $('#oldposy').html();
var posx = $('#posx').html();
var posy = $('#posy').html();
ctx.beginPath();
ctx.moveTo(oldposx, oldposy);
if (oldposx != '') {
ctx.lineTo(posx, posy);
ctx.strokeStyle = '#000000';
ctx.stroke();
}
$('#oldposx').html(e.offsetX);
$('#oldposy').html(e.offsetY);
}
$(document.body).append(pointer);
$('#posx').html(e.offsetX);
$('#posy').html(e.offsetY);
}//condition
});
$('#crop').click(function() {
condition = 0;
/* // var pattern = ctx.createPattern(imageObj, "repeat");
//ctx.fillStyle = pattern; */
$('.spot').each(function() {
$(this).remove();
})
/* //clear canvas */
/* //var context = canvas.getContext("2d"); */
ctx.clearRect(0, 0, 217, 275);
ctx.width = 217;
ctx.height = 275;
ctx.globalCompositeOperation = 'destination-over';
/* //draw the polygon */
setTimeout(function() {
/* //console.log(points); */
var offset = $('#myCanvas').offset();
/* //console.log(offset.left,offset.top); */
for (var i = 0; i < points.length; i += 2) {
var x = parseInt(jQuery.trim(points[i]));
var y = parseInt(jQuery.trim(points[i + 1]));
if (i == 0) {
ctx.moveTo(x - offset.left, y - offset.top);
} else {
ctx.lineTo(x - offset.left, y - offset.top);
}
/* console.log(points[i],points[i+1]) */
}
if (this.isOldIE) {
ctx.fillStyle = '';
ctx.fill();
var fill = $('fill', myCanvas).get(0);
fill.color = '';
fill.src = element.src;
fill.type = 'tile';
fill.alignShape = false;
}
else {
var pattern = ctx.createPattern(imageObj, "repeat");
ctx.fillStyle = pattern;
ctx.fill();
/* console.log(ctx) */
var dataurl = canvas.toDataURL("image/jpg");
/* console.log(dataurl) */
/* //upload to server (if needed) */
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', false);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var files = dataurl;
var data = new FormData();
var myprod = $("#pid").val();
data = 'image=' + files;
xhr.send(data);
if (xhr.status === 200) {
console.log(xhr.responseText)
$("#myimg").html('<img src="Cropped_images/' + xhr.responseText + '.png"/>');
}
else
{console.log("Error")}
}
}, 20);
});
/* // } */
});
});
</script>