8
मैं एचटीएमएल 5 कैनवास के साथ खेल रहा हूं और मैंने कुछ ऐसा देखा है जो मुझे ऑनलाइन के लिए एक प्रस्ताव नहीं मिला। यहाँ सरल कोड मैंएचटीएमएल 5 कैनवास प्रत्येक स्ट्रोक के साथ धीमा हो जाता है और
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" style="border: 1px solid;" width="200" height="200"></canvas>
<br />
<button id="draw">draw</button>
<button id="clear">clear</button>
</body>
</html>
<script type="text/javascript">
(function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
$("#draw").bind("click", function() {
for (var i = 0; i < 200; i++) {
context.moveTo(0, i);
context.lineTo(100, 100);
context.stroke();
}
});
$("#clear").bind("click", function() {
context.clearRect(0, 0, 200, 200);
});
}());
</script>
साथ हर बार है कि मैं आकर्षित दबाते हैं, जिस गति से यह पूरा तेजी से धीमा करने के लिए लगता है खेल रहा हूँ है। क्या कोई यह जान सकता है कि यह क्यों हो रहा है?
यह आईई के माध्यम से सबसे धीमा हो जाता है। क्रोम प्रत्येक ड्रॉ क्लिक के साथ इसे तेज़ी से पूरा करता प्रतीत होता है, लेकिन आप अभी भी गति में कमी का ध्यान रख सकते हैं।
बिल्कुल सही !! मेरे लिए एक आकर्षण की तरह काम किया :) – psousa
इसके अलावा, आप context.stroke(); एक बेहतर अनुकूलन के लिए लूप के बाहर फ़ंक्शन करें। मार्गों का निर्माण करें और फिर कई बार एक बार में उन सभी को स्ट्रोक करें। – jackrugile
इसके लिए धन्यवाद! कैनवास के लिए W3Schools दस्तावेज़ पर, यह वास्तव में आपके पथ को बंद करने के महत्व को निर्दिष्ट नहीं करता था, लेकिन मैं सचमुच उस गेम में ब्राउज़र को मार रहा था जिसे मैं 30 सेकंड के बाद बना रहा हूं। – Unome