Java腳本html5畫布

按鈕單擊我只想將元素放在畫布上，但它不起作用。這是我寫的代碼：Java腳本html5畫布

<script language="javascript" type="text/javascript"> 
function image() 
{ 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.clear(); 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    context.clear(true) 
    var imgobj=new Image(); 
    imgobj.onload=function() 
    { 
     ctx.drawImage(imgobj,69,50); 
    } 
    imgobj.src='images.jpg'; 
} 

function circle() 
{ 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.clear(); 

    // do some more drawing 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    // do some drawing with the new transform 
    context.clear(true); 
    ctx.beginPath(); 
    ctx.arc(95,50,40,0,2*Math.PI); 
    ctx.stroke(); 
} 

function line() 
{ 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.clear(); 

    // do some more drawing 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    // do some drawing with the new transform 
    context.clear(true); 
    ctx.moveTo(0,0); 
    ctx.lineTo(200,100); 
    ctx.stroke(); 

</script> 

</head> 
<body> 
    <h1>Demo of HTM5</h1> 
    <div class="canvas1" align="left"> 
     <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"> 
     </canvas> 
     <p><button onclick="circle()"> Draw Circle</button></p> 
     <p><button onclick="line()"> Draw Line</button></p> 
     <p><button onclick="image()"> Display Image</button></p> 
    </div> 
</body> 
</html>

來源

2014-01-29 jShubh

檢查您的'onclick ='行的語法。你正在尋找更像這樣的東西：'onclick = function（）{circle（）; }'。 –

我做到了這一點，還bt仍然不工作... – jShubh

有上下文對象上沒有ctx.clear()方法，而是嘗試用：

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

您也使用一個未分配context，你應該刪除。

此外，每次在函數內部都不需要查找canvas，只需在全局範圍內執行一次即可。

而且，在您的行方法中，您錯過了beginPath()調用。

See fiddle here

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

function image() { 

    /// use this to clear canvas 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    var imgobj = new Image(); 
    imgobj.onload = function() { 
     ctx.drawImage(imgobj, 69, 50); 
    } 
    imgobj.src = 'images.jpg'; 
} 

function circle() { 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

    // do some more drawing 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    // do some drawing with the new transform 
    ctx.beginPath(); 
    ctx.arc(95, 50, 40, 0, 2 * Math.PI); 
    ctx.stroke(); 
} 

function line() { 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

    // do some more drawing 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    // do some drawing with the new transform 

    ctx.beginPath(); /// add a beginPath here 
    ctx.moveTo(0, 0); 
    ctx.lineTo(200, 100); 
    ctx.stroke(); 
}

來源

2014-01-29 05:07:54 K3N

我想，你使用了一些錯誤的做法，以清除畫布。畫布無法清除它。

，而不是你應該使用：.clearRect(0, 0, 300, 300);

下面是示例代碼：

function circle(){ 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.clearRect(0, 0, 300, 300); 

    // do some more drawing 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 
    ctx.beginPath(); 
    ctx.arc(95,50,40,0,2*Math.PI); 
    ctx.stroke(); 
} 
function line(){ 
    var c = document.getElementById('myCanvas'); 
    var ctx = c.getContext('2d'); 

    ctx.clearRect(0, 0, 300, 300); 
    ctx.setTransform(-1, 0, 0, 1, 200, 200); 

    // do some drawing with the new transform  
    ctx.beginPath(); 
    ctx.moveTo(0, 0); 
    ctx.lineTo(200,100); 
    ctx.stroke(); 
}

的jsfiddle：http://jsfiddle.net/FumBm/3/

另外，有一個在你的腳本名稱context沒有變量。 :)

來源

2014-01-29 05:17:18

我已經糾正它bt仍然運行.... – jShubh

看到我提供的jsfiddle，這將幫助你跟蹤你的錯誤。 –

Java腳本html5畫布

回答

相關問題