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画布

回答

相关问题