Javascript 在引导模式中制作绘图应用程序

我正在尝试在引导模式中制作一个绘图应用程序

到目前为止，我已经做到了这一点

这是我的密码

var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 570);
canvas.setAttribute('height', 300);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

$('#canvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;

  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

$('#canvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

$('#canvas').mouseup(function(e){
  paint = false;
});

$('#canvas').mouseleave(function(e){
  paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;

  for(var i=0; i < clickX.length; i++) {
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

var canvasDiv=document.getElementById（'canvasDiv'）； canvas=document.createElement（'canvas'）； canvas.setAttribute（'width'，570）； canvas.setAttribute（'height'，300）； setAttribute（'id'，'canvas'）； canvasDiv.appendChild（canvas）； if（G_vmlCanvasManager的类型！=“未定义”）{ canvas=G_vmlCanvasManager.initElement（canvas）； } context=canvas.getContext（“2d”）； $（“#画布”）.mousedown（函数（e）{ var mouseX=e.pageX-this.offsetLeft； var mouseY=e.pageY-this.offsetTop； 油漆=真； addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop）； 重画（）； }); $（'#canvas'）.mousemove（函数（e）{ 如果（油漆）{ addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）； 重画（）； } }); $（'#canvas'）.mouseup（函数（e）{ 油漆=假； }); $（'#canvas'）.mouseleave（函数（e）{ 油漆=假； }); var clickX=新数组（）； var clickY=新数组（）； var clickDrag=新数组（）； var涂料； 功能添加单击（x、y、拖动） { 点击x，推送（x）； clickY.push（y）； 单击拖动。推送（拖动）； } 函数重画（）{ context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除画布 context.strokeStyle=“#df4b26”； context.lineJoin=“round”； context.lineWidth=5； 对于（变量i=0；i 但是当鼠标被点击时，绘图就偏离了鼠标指针所在的位置。查一查小提琴，了解我的意思

---

我还想知道如何使画布采用模式的高度和宽度，而不传入静态宽度和高度如下

画布.setAttribute（'width'，570）

1.offsetleft是相对于父元素的，因此需要

$。offset

2.高度和宽度根据显示后的母材而定

---

结果请参见

1。偏移量left是相对于父元素的，因此需要$。偏移量

2.高度和宽度根据显示后的母材而定

---

结果请参见

谢谢。现在可以工作了，谢谢你。现在工作