爲什麼我的畫布畫面很小？

Question

我正在創建一個基於畫布的enyo控件。它應該捕獲鼠標或手指事件，並將其繪製到它上面。但是，當我畫在畫布上時，它只會畫到其中的一小部分。

看看那jsfiddle，因爲它包含所有相關的代碼。

enyo.kind({ 
    name: "SignatureControl", 
    kind: "enyo.Canvas", 

    recording: false, 
    points: [], 

    handlers: { 
    ondown: "startRecord", 
    onmove: "record", 
    onup: "stopRecord" 
    }, 

    startRecord: function(inSender, inEvent) { 
    this.recording = true; 

    if(node = this.hasNode()) { 
     this.points.push({ 
     x: inEvent.clientX - node.offsetLeft, 
     y: inEvent.clientY - node.offsetTop, 
     d: false, 
     p: 1 
     }); 
    } 
    this.update(); 
    }, 

    stopRecord: function() { 
    this.recording = false; 
    }, 

    record: function(inSender, inEvent) { 
    if(this.recording) { 
    if(node = this.hasNode()) { 
     this.points.push({ 
     x: inEvent.clientX - node.offsetLeft, 
     y: inEvent.clientY - node.offsetTop, 
     d: true, 
     p: 1 
     }); 
    } 
     this.update(); 
    } 
    }, 

    update: function() { 
     var canvas = this.hasNode(); 
     if (canvas.getContext) { 
      var ctx = canvas.getContext('2d'); 
     this.log(ctx.canvas.width); 

     ctx.lineJoin = "round"; 
     ctx.lineWidth = 1; 

     var i = this.points.length - 1; 

     ctx.strokeStyle = "rgba(0,0,0," + this.points[i].p + ")"; 
     ctx.beginPath(); 
     if(this.points[i].d && i){ 
     ctx.moveTo(this.points[i-1].x, this.points[i-1].y); 
     }else{ 
     ctx.moveTo(this.points[i].x-1, this.points[i].y); 
     } 
     ctx.lineTo(this.points[i].x, this.points[i].y); 
     ctx.closePath(); 
     ctx.stroke(); 
     } 
    } 
}); 

Answer 1

您只能在畫布上使用高度/寬度屬性，而不是通過CSS對其進行大小調整。看看這個更新小提琴http://jsfiddle.net/AFqvD/4/

有關部分：

{kind: "SignatureControl", attributes: {height: 150, width: 300}}