যৌগিক ক্রিয়াকলাপ নিয়ে পরীক্ষার পরে এবং ক্যানভাসে চিত্র অঙ্কন করার পরে আমি এখন চিত্রগুলি এবং কম্পোজিটিং অপসারণের চেষ্টা করছি। আমি এটা কিভাবে করবো?
অন্যান্য চিত্রগুলি পুনরায় আঁকার জন্য আমার ক্যানভাসটি সাফ করা দরকার; এটি কিছু সময়ের জন্য যেতে পারে তাই আমি মনে করি না প্রতিবার একটি নতুন আয়তক্ষেত্র আঁকাই সবচেয়ে কার্যকর বিকল্প হবে।
উত্তর:
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);context.clearRect(0, 0, context.canvas.width, context.canvas.height)। এটি কার্যকরভাবে একই জিনিস তবে একটি কম নির্ভরতা (2 পরিবর্তে 1 ভেরিয়েবল)
context.clearRect(0, 0, canvas.width, canvas.height);পুরো ক্যানভাসটি সাফ করার জন্য এটি দ্রুত এবং সর্বাধিক বর্ণনামূলক উপায়।
canvas.width = canvas.width;রিসেট canvas.widthরিসেট সব ক্যানভাস রাষ্ট্র (যেমন রূপান্তরের, lineWidth, strokeStyle, ইত্যাদি), এটা খুবই ধীর (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% দ্রুত। আপনার ক্যানভাসের আকার বাড়ার সাথে সাথে এই পার্থক্যটি হ্রাস পাবে।
এটি ইতিমধ্যে তুলনামূলকভাবে তুচ্ছ, তবে বেশিরভাগ ক্ষেত্রে আপনি সাফ করার চেয়ে আপনি যথেষ্ট পরিমাণে আঁকবেন এবং আমি বিশ্বাস করি যে এই পারফরম্যান্সের পার্থক্য অপ্রাসঙ্গিক be
100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clearcanvasব্যবহার করে আপনি স্থানীয় ভেরিয়েবলের প্রয়োজনীয়তা সরাতে পারেন ctx.canvas।
canvas.widthএবং canvas.heightযখন ক্লিয়ারিং। ট্রান্সফর্মটি পুনরায় সেট করার তুলনায় রানটাইম পার্থক্যের জন্য আমি কোনও সংখ্যাসূচক বিশ্লেষণ করিনি, তবে আমার সন্দেহ হয় যে এটি কিছুটা আরও ভাল পারফরম্যান্স অর্জন করবে।
আপনি যদি লাইন আঁকেন তবে নিশ্চিত হন যে আপনি ভুলে যাবেন না:
context.beginPath();অন্যথায় লাইনগুলি সাফ হবে না।
beginPath , কেবল কারণ আপনি তা ধরে নিবেন না ক্যানভাস সাফ করছে আপনি নিজের বিদ্যমান পথটি সাফ করতে চান! এটি একটি ভয়ঙ্কর অনুশীলন হবে এবং অঙ্কনের দিকে তাকানোর পিছনের দিক।
beginPathআপনার ক্যানভাসের কোনও কিছুই সাফ করে না, এটি পথটি পুনরায় সেট করে যাতে আপনার আঁকার আগে পূর্ববর্তী পাথের প্রবেশগুলি সরিয়ে ফেলা হয়। আপনার সম্ভবত এটির দরকার ছিল, তবে একটি অঙ্কন অপারেশন হিসাবে, কোনও ক্লিয়ারিং অপারেশন নয়। পরিষ্কার, তারপরে বিগপথ এবং অঙ্কন, পরিষ্কার নয় এবং সূচনাপথ, তারপরে অঙ্কন করুন। পার্থক্যটি কি বোঝায়? উদাহরণের জন্য এখানে দেখুন: w3schools.com/tags/canvas_beginpath.asp
অন্যরা ইতিমধ্যে প্রশ্নের উত্তর দেওয়ার জন্য একটি দুর্দান্ত কাজ 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 );@ পেন্টিয়াম 10 এর পরামর্শ অনুসারে কিন্তু আইই 9 মনে হয় এই নির্দেশকে সম্পূর্ণ উপেক্ষা করবে।canvas.width = canvas.width;আই 99 এর প্রতিক্রিয়া বলে মনে হচ্ছে: তবে আপনি যদি জন জোস অলস্প্পের প্রথম প্রস্থ পরিবর্তন করার সমাধানটি ব্যবহার না করেন তবে লাইনগুলি, কেবল আকারগুলি, ছবি এবং অন্যান্য অবজেক্টগুলি পরিষ্কার করে না।সুতরাং আপনার যদি এমন একটি ক্যানভাস এবং প্রসঙ্গ তৈরি করা থাকে:
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;
}context.clearRect(0,0,context.canvas.width,context.canvas.height)।
function clearCanvas(ctx) { ctx.beginPath(); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); }
এটি 2018 এবং এখনও পুনরায় চিত্রের জন্য ক্যানভাস সম্পূর্ণরূপে সাফ করার কোনও দেশীয় পদ্ধতি নেই। সম্পূর্ণ ক্যানভাস পরিষ্কার clearRect() করে না । ভরাট নয় এমন ধরণের অঙ্কনগুলি সাফ হয়ে যায় না (উদাঃ rect())
1. আপনি কীভাবে আঁকেন তা নির্বিশেষে সম্পূর্ণ ক্যানভাসকে পরিষ্কার করতে:
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();পেশাদাররা: স্ট্রোক স্টাইল, ফিলস স্টাইল ইত্যাদি সংরক্ষণ করে; পিছিয়ে নেই;
কনস: অকারণে যদি আপনি কিছু আঁকার আগে ইতিমধ্যে স্টার্টপথ ব্যবহার করেন
2. প্রস্থ / উচ্চতা হ্যাক ব্যবহার:
context.canvas.width = context.canvas.width;অথবা
context.canvas.height = context.canvas.height;পেশাদাররা: আইই কনসের সাথে কাজ করে: স্ট্রোক স্টাইল, ফিল স্টাইলকে কালোতে পুনরায় সেট করে; Laggy;
আমি ভাবছিলাম কেন স্থানীয় সমাধানের অস্তিত্ব নেই। আসলে, clearRect()একক লাইন সমাধান হিসাবে বিবেচিত হয় কারণ বেশিরভাগ ব্যবহারকারী beginPath()কোনও নতুন পথ আঁকার আগে করেন। যদিও সূচনাপথটি কেবল রেখাগুলি আঁকানোর সময় ব্যবহার করা হয় এবং বন্ধ পথের মতো নয়rect().
এই কারণেই গ্রহণযোগ্য উত্তরটি আমার সমস্যার সমাধান করেনি এবং আমি বিভিন্ন হ্যাকের চেষ্টা করে ঘন্টা নষ্ট করে দিয়েছি। অভিশাপ তুমি মজিলার
এক্স, ওয়াই কো-অর্ডিনেটস এবং ক্যানভাসের উচ্চতা এবং প্রস্থকে পেরিয়ে ক্লিয়াররেট পদ্ধতিটি ব্যবহার করুন। ক্লিয়ারআরেক্ট পুরো ক্যানভাসকে এইভাবে সাফ করবে:
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আইডিক কীভাবে এটি কাজ করে!
এটি আমি ব্যবহার করি, নির্বিশেষে সীমানা এবং ম্যাট্রিক্স রূপান্তর:
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। তারপরে, পূর্ববর্তী প্রসঙ্গের অবস্থাটি পুনরুদ্ধার করে।
এটি আমার পাইচার্টের জন্য চার্ট.জেজে কাজ করেছে
<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আমি দেখতে পেয়েছি যে সমস্ত ব্রাউজারগুলিতে আমি পরীক্ষা করে দেখি যে, দ্রুততম উপায় হ'ল আসলে সাদা বা আপনি যে কোনও রঙের সাথে রঙিন করুন fill আমার একটি খুব বড় মনিটর রয়েছে এবং পূর্ণ স্ক্রিন মোডে স্পষ্টরেক্টটি agonizingly ধীর, তবে ফিলরেট যুক্তিসঙ্গত।
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;
}আমি সবসময় ব্যবহার করি
cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);context.clearRect(0,0,w,h) আরজিবিএ মানগুলির সাথে প্রদত্ত আয়তক্ষেত্রটি পূরণ করুন:
0 0 0 0: ক্রোম দিয়ে
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 = 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 dataclearRect।
আপনি যদি কেবল অঙ্কন জমা দেওয়ার জন্য কোনও ফর্মটিতে ক্লিয়াররেট ব্যবহার করেন তবে ক্লিয়ারিংয়ের পরিবর্তে আপনি একটি জমা পাবেন বা সম্ভবত এটি প্রথমে সাফ হয়ে যায় এবং পরে একটি অকার্যকর অঙ্কন আপলোড করতে হবে, তাই আপনাকে একটি যুক্ত করতে হবে ফাংশনটির শুরুতে ডিফল্ট প্রতিরোধ করুন:
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)বিঃদ্রঃ
ক্লিয়ারট রেকট এবং অনুরোধের সংমিশ্রণ অ্যানিমেশনফ্রেম যদি আপনি যা করছেন তা যদি আরও তরল অ্যানিমেশনের অনুমতি দেয়
আপনি কীভাবে একটি স্ট্যান্ডার্ড ক্যানভাস সাফ করেন তার সমস্ত দুর্দান্ত উদাহরণ, তবে আপনি যদি পেপারজ ব্যবহার করেন, তবে এটি কাজ করবে:
জাভাস্ক্রিপ্টে একটি বৈশ্বিক পরিবর্তনশীল সংজ্ঞা দিন:
var clearCanvas = false;আপনার পেপারস্ক্রিপ্ট সংজ্ঞায়িত থেকে:
function onFrame(event){
if(clearCanvas && project.activeLayer.hasChildren()){
project.activeLayer.removeChildren();
clearCanvas = false;
}
}এখন আপনি যেখানেই স্পষ্ট ক্যানভাস সেট করেছেন, এটি স্ক্রীন থেকে সমস্ত আইটেম সাফ করবে।
clearRectআপনার জন্য হয় একটি অপরিকল্পিত প্রসঙ্গ থাকতে হবে, বা আপনার আসল সীমানা ট্র্যাক করা উচিত।