නැවත ඇඳීම සඳහා කැන්වස් ඉවත් කරන්නේ කෙසේද?

සංයුක්ත මෙහෙයුම් අත්හදා බැලීමෙන් පසු සහ කැන්වසය මත රූප ඇඳීමෙන් පසු මම දැන් උත්සාහ කරන්නේ රූප ඉවත් කිරීමට සහ සංයුක්ත කිරීමට ය. මම මෙය කරන්නේ කෙසේද?

වෙනත් පින්තූර නැවත ඇඳීම සඳහා මට කැන්වසය ඉවත් කිරීමට අවශ්‍යයි; මෙය ටික වේලාවක් පැවතිය හැකි බැවින් සෑම විටම නව සෘජුකෝණාස්රයක් ඇඳීම වඩාත් කාර්යක්ෂම විකල්පයක් වනු ඇතැයි මම නොසිතමි.

const context = canvas.getContext('2d');

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

භාවිත: context.clearRect(0, 0, canvas.width, canvas.height);

සමස්ත කැන්වසය ඉවත් කිරීමට වේගවත්ම හා විස්තරාත්මක ක්‍රමය මෙයයි.

පාවිච්චි කරන්න එපා: canvas.width = canvas.width;

යළි පිහිටුවීම canvas.widthසියලු කැන්වස් තත්වය (උදා: පරිණාමන, රේඛීය පළල, ආ roke ාත ස්ටයිල්, ආදිය), එය ඉතා මන්දගාමී වේ (clearRect හා සසඳන විට), එය සියලු බ්‍රව්සර්වල ක්‍රියා නොකරයි, ඔබ සැබවින්ම කිරීමට උත්සාහ කරන්නේ කුමක්ද යන්න එය විස්තර නොකරයි.

පරිණාමිත ඛණ්ඩාංක සමඟ කටයුතු කිරීම

ඔබ (උදා: භාවිතා පරිවර්තනය න්යාසය වෙනස් කර තිබේ නම් scale, rotateහෝ translate), පසුව context.clearRect(0,0,canvas.width,canvas.height)ඉඩ, එම කැන්වසය මතින් සමස්ත දෘශ්යමාන කොටස ඉවත් නොවනු ඇත.

විසඳුම? කැන්වසය ඉවත් කිරීමට පෙර පරිවර්තන අනුකෘතිය නැවත සකසන්න:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

සංස්කරණය කරන්න: මම දැන් පැතිකඩක් කර ඇති අතර (ක්‍රෝම් හි) පරිණාමනය නැවත සකස් නොකර 300x150 (පෙරනිමි ප්‍රමාණය) කැන්වස් ඉවත් කිරීම 10% ක් පමණ වේගවත් වේ. ඔබේ කැන්වසයේ ප්‍රමාණය වැඩි වන විට මෙම වෙනස පහත වැටේ.

එය දැනටමත් සාපේක්ෂව නොවැදගත් ය, නමුත් බොහෝ අවස්ථාවන්හි දී ඔබ ඉවත් කිරීමට වඩා සැලකිය යුතු ප්‍රමාණයක් ඔබ අඳිනු ඇති අතර මෙම කාර්යසාධන වෙනස අදාල නොවන බව මම විශ්වාස කරමි.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

ඔබ රේඛා අඳින්නේ නම්, ඔබට අමතක නොවන බවට වග බලා ගන්න:

context.beginPath();

එසේ නොමැතිනම් රේඛා හිස් නොවේ.

තවත් සමහරු මේ වන විටත් ප්‍රශ්නයට පිළිතුරු සපයන විශිෂ්ට කාර්යයක් කර ඇති නමුත් clear()සන්දර්භය වස්තුව පිළිබඳ සරල ක්‍රමයක් ඔබට ප්‍රයෝජනවත් වේ නම් (එය මට විය), මෙහි පිළිතුරු මත පදනම්ව මම භාවිතා කරන්නේ මෙයයි:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

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

    if (preserveTransform) {
      this.restore();
    }           
};

භාවිතය:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

• ක්‍රෝම් ඊට හොඳ ප්‍රතිචාර දක්වයි: context.clearRect ( x , y , w , h );ent පෙන්ටියම් 10 යෝජනා කළ පරිදි IE9 මෙම උපදෙස් සම්පූර්ණයෙන්ම නොසලකා හරින බව පෙනේ.
• IE9 ප්‍රතිචාර දක්වන්නේ: canvas.width = canvas.width; නමුත් පළල වෙනස් කිරීම සඳහා ජෝන් ඇල්සොප්ගේ විසඳුම ඔබ භාවිතා නොකරන්නේ නම් එය රේඛා, හැඩතල, පින්තූර සහ වෙනත් වස්තූන් ඉවත් නොකරයි.

එබැවින් ඔබට කැන්වසය සහ සන්දර්භය මේ ආකාරයෙන් නිර්මාණය කර ඇත්නම්:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

ඔබට මෙවැනි ක්‍රමයක් භාවිතා කළ හැකිය:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

මෙය 2018 වන අතර නැවත ඇඳීම සඳහා කැන්වස් සම්පූර්ණයෙන්ම ඉවත් කිරීමට තවමත් දේශීය ක්‍රමයක් නොමැත. කැන්වසය සම්පූර්ණයෙන්ම ඉවත් clearRect() නොකරයි . පිරවුම් නොවන ආකාරයේ ඇඳීම් ඉවත් නොකෙරේ (උදා. rect())

1. ඔබ අඳින්නේ කෙසේද යන්න නොසලකා කැන්වස් සම්පූර්ණයෙන්ම ඉවත් කිරීමට:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

වාසි: ආ roke ාත ස්ටයිල්, ෆිල්ස්ටයිල් ආදිය ආරක්ෂා කරයි; ප්‍රමාදයක් නැත;

අවාසි: කිසිවක් ඇඳීමට පෙර ඔබ දැනටමත් ආරම්භක මාර්ගය භාවිතා කරන්නේ නම් අනවශ්‍යය

2. පළල / උස හැක් කිරීම:

context.canvas.width = context.canvas.width;

හෝ

context.canvas.height = context.canvas.height;

වාසි: IE සමඟ ක්‍රියා කරයි. ලග්නය;

දේශීය විසඳුමක් නොපවතින්නේ මන්දැයි මම කල්පනා කළෙමි. ඇත්ත වශයෙන්ම, clearRect()තනි පේළි විසඳුමක් ලෙස සලකනු ලබන්නේ බොහෝ පරිශීලකයින් beginPath()ඕනෑම නව මාර්ගයක් ඇඳීමට පෙර කරන බැවිනි . ආරම්භක මාවත භාවිතා කළ යුත්තේ රේඛා ඇඳීමේදී පමණක් වන අතර එය සංවෘත මාර්ගයක් නොවේrect().

පිළිගත් පිළිතුර මගේ ගැටලුව විසඳීමට හේතුව මෙය වන අතර මම විවිධ උපක්‍රම උත්සාහ කරමින් පැය ගණනක් නාස්ති කළෙමි. ඔබට මොසිල්ලාට ශාප කරන්න

X, y ඛණ්ඩාංක සහ කැන්වස් වල උස හා පළල පසු කිරීමෙන් පැහැදිලි රෙක්ට් ක්‍රමය භාවිතා කරන්න. ClearRect විසින් සම්පූර්ණ කැන්වස් පහත පරිදි ඉවත් කරනු ඇත:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

මෙහි හොඳ පිළිතුරු ටොන් ගණනක් තිබේ. තවත් සටහනක් නම් සමහර විට කැන්වසය අර්ධ වශයෙන් ඉවත් කිරීම විනෝදජනක බවයි. එනම්, පෙර රූපය මුළුමනින්ම මකා දැමීම වෙනුවට "මැකී යන්න". මෙය හොඳ මංපෙත් විපාක ලබා දිය හැකිය.

එය පහසුයි. ඔබගේ පසුබිම් වර්ණය සුදු යැයි සිතමු:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

ඉක්මන් ක්‍රමයක් වන්නේ එය කිරීමයි

canvas.width = canvas.width

Idk එය ක්‍රියා කරන ආකාරය නමුත් එය ක්‍රියාත්මක වේ!

මායිම් සහ අනුකෘති පරිවර්තනයන් නොසලකා මා භාවිතා කරන්නේ මෙයයි:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

මූලික වශයෙන්, එය සන්දර්භයේ වත්මන් තත්වය සුරකින අතර විනිවිද පෙනෙන පික්සෙල් එකක් copyලෙස ඇද ගනී globalCompositeOperation. ඉන්පසු, පෙර සන්දර්භය තත්වය යථා තත්වයට පත් කරයි.

මෙය char.js හි මගේ පයිචාර්ට් සඳහා වැඩ කළේය

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

මා විසින් පරීක්ෂා කරන ලද සියලුම බ්‍රව්සර්වල වේගවත්ම ක්‍රමය වන්නේ සුදු පැහැයෙන් හෝ ඔබ කැමති ඕනෑම වර්ණයකින් පුරවා ගැනීමයි. මා සතුව ඉතා විශාල මොනිටරයක් ​​ඇති අතර සම්පූර්ණ තිර ප්‍රකාරයේදී clearRect ඉතා මන්දගාමී වේ, නමුත් fillRect සාධාරණයි.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

අවාසිය නම් කැන්වසය තවදුරටත් විනිවිද නොවීමයි.

වෙබ්කිට් වලදී ඔබට පළල වෙනත් අගයකට සැකසිය යුතුය, එවිට ඔබට එය නැවත ආරම්භක අගයට සැකසිය හැකිය

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

මෙය ලිවීම සරල, නමුත් එතරම් කියවිය නොහැකි ක්‍රමයක්:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

මම නිතරම භාවිතා කරමි

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

context.clearRect(0,0,w,h)   

දී ඇති සෘජුකෝණාස්රය RGBA අගයන් සමඟ පුරවන්න:
0 0 0 0: Chrome සමඟ
0 0 0 255 සමඟ: එෆ්එෆ් සහ සෆාරි සමඟ

ඒත්

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

බ්‍රව්සරය කුමක් වුවත්
0 0 0 255 පිරවූ සෘජුකෝණාස්රය ඉඩ දෙන්න
!

Context.clearRect(starting width, starting height, ending width, ending height);

උදාහරණයක්: context.clearRect(0, 0, canvas.width, canvas.height);

කෙටිම ක්‍රමය:

canvas.width += 0

වේගවත්ම ක්‍රමය:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

ඔබ clearRect පමණක් භාවිතා කරන්නේ නම්, ඔබේ චිත්‍රය ඉදිරිපත් කිරීම සඳහා ඔබ සතුව පෝරමයක් තිබේ නම්, ඔබට නිශ්කාෂණය වෙනුවට ඉදිරිපත් කිරීමක් ලැබෙනු ඇත, නැතහොත් සමහර විට එය පළමුව නිෂ්කාශනය කර අවලංගු චිත්‍රයක් උඩුගත කළ හැකිය, එවිට ඔබට එකතු කළ යුතුය ශ්‍රිතය හිඟමනේ දී වැළැක්වීම:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

එය යමෙකුට උපකාරී වේ යැයි සිතමි.

මම සෑම විටම මෙය භාවිතා කරමි

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

සටහන

clearRect සහ requestAnimationFrame සංයෝජනය කිරීමෙන් ඔබ යන්නේ නම් වැඩි තරල සජීවීකරණයක් සඳහා ඉඩ ලබා දේ

මේ සියල්ල ඔබ සම්මත කැන්වස් ඉවත් කරන ආකාරය පිළිබඳ විශිෂ්ට උදාහරණ වේ, නමුත් ඔබ කඩදාසි භාවිතා කරන්නේ නම් මෙය ක්‍රියාත්මක වනු ඇත:

ජාවාස්ක්‍රිප්ට් හි ගෝලීය විචල්‍යයක් නිර්වචනය කරන්න:

var clearCanvas = false;

ඔබේ කඩදාසි පිටපතෙන් අර්ථ දක්වන්න:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

දැන් ඔබ පැහැදිලි කැන්වස් සත්‍ය ලෙස සකසන ඕනෑම තැනක, එය තිරයෙන් සියලුම අයිතම ඉවත් කරයි.