admin管理员组文章数量:1336420
I am having a really difficult time resetting / clearning the contents of my canvas. I am currently using the : Sketch.js plugin to generate a free form canvas. It does exactly what I need it to, however, it does not seem to have an simple canvas 'reset' function call to clear the contents.
jsfiddle: /
NOTE: I read that the 'width' method does not work in chrome, and both methods don't seem to work on a 'free-form' canvas, but only on shapes, which I did not test.
This is what I tried so far:
Markup
<div class="signature-field">
Signature:
<span class="sketch-container">
<canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
<span class="save-signature">Save Signature</span>
<span class="reset-canvas">Reset Canvas</span>
</span>
Date: <input type="text"><br/><br/>Name: <input type="text">
</div>
JQuery (My latest attempt)
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("#simple_sketch");
var width = myCanvas.width;
myCanvas.width = width + 1;
});
Method 2:
$('.reset-canvas').click(function() {
canvas.width = canvas.width;
});
Method 3:
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
I am having a really difficult time resetting / clearning the contents of my canvas. I am currently using the : Sketch.js plugin to generate a free form canvas. It does exactly what I need it to, however, it does not seem to have an simple canvas 'reset' function call to clear the contents.
jsfiddle: http://jsfiddle/k7fmq/
NOTE: I read that the 'width' method does not work in chrome, and both methods don't seem to work on a 'free-form' canvas, but only on shapes, which I did not test.
This is what I tried so far:
Markup
<div class="signature-field">
Signature:
<span class="sketch-container">
<canvas style="border:1px solid grey; border-radius:7px;" id="simple_sketch" width="400" height="150"></canvas>
<span class="save-signature">Save Signature</span>
<span class="reset-canvas">Reset Canvas</span>
</span>
Date: <input type="text"><br/><br/>Name: <input type="text">
</div>
JQuery (My latest attempt)
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("#simple_sketch");
var width = myCanvas.width;
myCanvas.width = width + 1;
});
Method 2:
$('.reset-canvas').click(function() {
canvas.width = canvas.width;
});
Method 3:
$('.reset-canvas').click(function() {
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
Share
Improve this question
edited Dec 10, 2012 at 19:21
AnchovyLegend
asked Dec 10, 2012 at 16:52
AnchovyLegendAnchovyLegend
12.5k41 gold badges152 silver badges240 bronze badges
7
- Maybe this will help? stackoverflow./questions/9701380/… – Barrie Reader Commented Dec 10, 2012 at 17:00
- Where's the code that draws this image? – Shmiddty Commented Dec 10, 2012 at 18:40
- It is drawn by the user using a free-form brush, it will be different every time. The code that actually handles this free-form brush capability is here: intridea.github./sketch.js/lib/sketch.js – AnchovyLegend Commented Dec 10, 2012 at 18:41
- Can you set up a working fiddle demonstrating your problem? – Shmiddty Commented Dec 10, 2012 at 18:46
-
What are the values of x, y, w, h and context in method 3?
context.clearRect (0, 0, canvas.width, canvas.height)
should work, as long as the appropriatecontext
andcanvas
are within the function's scope. – Stuart Commented Dec 10, 2012 at 18:57
2 Answers
Reset to default 7Try this: http://jsfiddle/k7fmq/1/
The sketchpad plugin keeps an array of "actions", and redraws them each update (which seems unnecessary, really, but whatevs).
var sktch = $('#simple_sketch').sketch(); // store a reference to the element.
var cleanCanvas = $('#simple_sketch')[0];
$('.save-signature').click(function(){
/* replace canvas with image */
var canvas = document.getElementById("simple_sketch");
var img = canvas.toDataURL("image/png");
$('#simple_sketch').replaceWith('<img src="'+img+'"/>');
$('.signature-buttons').replaceWith('');
});
$('.reset-canvas').click(function(){
sktch.sketch().actions = []; // this line empties the actions.
var myCanvas = document.getElementById("simple_sketch");
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
});
Try this:
var ctx = myCanvas.getContext('2d');
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.restore();
本文标签: javascriptUnable to clear canvasStack Overflow
版权声明:本文标题:javascript - Unable to clear canvas - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742246073a2439584.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论