Java脚本html5画布
Java脚本html5画布
提问于 2014-01-29 13:03:36
单击按钮时，我只想将元素放到画布中，但它不起作用。下面是我写的代码：
<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>回答 2
Stack Overflow用户
发布于 2014-01-29 13:07:55
context对象上没有ctx.clear()方法，请改用：
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);您还使用了一个应删除的未分配的context。
也不需要每次都在函数内部查找画布，只需在全局范围内查找一次即可。
而且，在您的line方法中，您遗漏了一个beginPath()调用。
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();
}Stack Overflow用户
发布于 2014-01-29 13:17:19
我认为，你正在使用一些错误的方法来清理画布。canvas没有清除它的方法。
相反，您应该使用：.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的变量。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21422504
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号