एचटीएमएल 5 कैनवस के पास स्पष्ट रूप से एकल पिक्सेल सेट करने की कोई विधि नहीं है।
बहुत छोटी लाइन का उपयोग करके पिक्सेल सेट करना संभव हो सकता है, लेकिन फिर एंटीलाइजिंग और लाइन कैप हस्तक्षेप कर सकते हैं।
एक और तरीका एक छोटी ImageDataवस्तु बनाने और उपयोग करने का हो सकता है :
context.putImageData(data, x, y)इसे लगाने के लिए।
क्या कोई ऐसा करने का एक कुशल और विश्वसनीय तरीका बता सकता है?
जवाबों:
दो सर्वश्रेष्ठ दावेदार हैं:
एक 1 × 1 छवि डेटा बनाएं, रंग सेट करें और putImageDataस्थान पर:
var id = myContext.createImageData(1,1); // only do this once per page
var d = id.data; // only do this once per page
d[0] = r;
d[1] = g;
d[2] = b;
d[3] = a;
myContext.putImageData( id, x, y );
fillRect()पिक्सेल खींचने के लिए उपयोग करें (कोई अन्य समस्याएँ नहीं होनी चाहिए):
ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
ctx.fillRect( x, y, 1, 1 );
आप यहाँ इनकी गति का परीक्षण कर सकते हैं: http://jsperf.com/setting-canvas-pixel/9 या यहाँ https://www.measurethat.net/Benchmark/Show/1664/1
मैं उन ब्राउज़रों के खिलाफ परीक्षण करने की सलाह देता हूं जिनकी आप अधिकतम गति के लिए परवाह करते हैं। जुलाई 2017 तक, fillRect()फ़ायरफ़ॉक्स v54 और क्रोम v59 (Win7x64) पर 5-6 × तेज है।
अन्य, sillier विकल्प हैं:
getImageData()/putImageData()पूरे कैनवास पर उपयोग करना; यह अन्य विकल्पों की तुलना में लगभग 100 × धीमा है।
डेटा url का उपयोग करके और drawImage()इसे दिखाने के लिए उपयोग करके एक कस्टम छवि बनाना :
var img = new Image;
img.src = "data:image/png;base64," + myPNGEncoder(r,g,b,a);
// Writing the PNGEncoder is left as an exercise for the reader
आप चाहते हैं कि सभी पिक्सल से भरा एक और img या कैनवास बनाने के लिए और भर में आप चाहते हैं drawImage()बस पिक्सेल पिक्सेल का उपयोग करने के लिए। यह संभवतः बहुत तेज़ होगा, लेकिन इसकी सीमा है कि आपको अपनी ज़रूरत के अनुसार पिक्सेल की पूर्व-गणना करने की आवश्यकता है।
ध्यान दें कि मेरे परीक्षण कैनवास संदर्भ को बचाने और पुनर्स्थापित करने का प्रयास नहीं करते हैं fillStyle; इससे fillRect()प्रदर्शन धीमा हो जाएगा । यह भी ध्यान दें कि मैं एक साफ स्लेट के साथ शुरू नहीं कर रहा हूं या प्रत्येक परीक्षण के लिए पिक्सेल के सटीक समान सेट का परीक्षण कर रहा हूं।
fillRect()पर, क्रोम -24 पर 1x1 putimagedata की तुलना में अर्ध-हाल ही में लगभग 10x तेज हो गया है। इसलिए ... यदि गति महत्वपूर्ण है और आप अपने लक्षित दर्शकों को जानते हैं, तो एक पुराने उत्तर (यहां तक कि मेरा) का शब्द न लें। इसके बजाय: परीक्षण!
एक विधि जिसका उल्लेख नहीं किया गया है वह getImageData और फिर putImageData का उपयोग कर रही है।
जब आप एक बार में बहुत कुछ खींचना चाहते हैं तो यह तरीका अच्छा है।
http://next.plnkr.co/edit/mfNyalsAR2MWkccr
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var pixels = id.data;
var x = Math.floor(Math.random() * canvasWidth);
var y = Math.floor(Math.random() * canvasHeight);
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var off = (y * id.width + x) * 4;
pixels[off] = r;
pixels[off + 1] = g;
pixels[off + 2] = b;
pixels[off + 3] = 255;
ctx.putImageData(id, 0, 0);मैंने विचार नहीं किया था fillRect(), लेकिन जवाब ने मुझे इसके खिलाफ बेंचमार्क करने के लिए प्रेरित किया putImage()।
एक (पुराने) मैकबुक प्रो पर क्रोम 9.0.597.84 के साथ यादृच्छिक स्थानों में 100,000 यादृच्छिक रूप से रंगीन पिक्सल्स रखना, 100ms से कम समय लेता है putImage(), लेकिन लगभग 900ms का उपयोग करना fillRect()। (बेंचमार्क कोड http://pastebin.com/4ijVKJcC पर )।
अगर इसके बजाय मैं छोरों के बाहर एक एकल रंग का चयन करता हूं और यादृच्छिक स्थानों पर उस रंग की साजिश करता putImage()हूं , तो 59ms बनाम 102ms लगते हैं fillRect()।
ऐसा लगता है कि rgb(...)सिंटैक्स में सीएसएस रंग विनिर्देश को उत्पन्न करने और पार्स करने का ओवरहेड अधिकांश अंतर के लिए जिम्मेदार है।
कच्चे आरजीबी मूल्यों को सीधे ImageDataदूसरी तरफ एक ब्लॉक में डालने के लिए किसी स्ट्रिंग हैंडलिंग या पार्सिंग की आवश्यकता नहीं होती है।
function setPixel(imageData, x, y, r, g, b, a) {
var index = 4 * (x + y * imageData.width);
imageData.data[index+0] = r;
imageData.data[index+1] = g;
imageData.data[index+2] = b;
imageData.data[index+3] = a;
}putImageData() उस फ़ंक्शन के बाद कॉल करना चाहिए या संदर्भ संदर्भ द्वारा अपडेट होगा?
यह अजीब लगता है, लेकिन फिर भी एचटीएमएल 5 ड्राइंग लाइनों, सर्कल, आयतों और कई अन्य मूल आकृतियों का समर्थन करता है, इसमें मूल बिंदु को खींचने के लिए कुछ भी उपयुक्त नहीं है। ऐसा करने का एकमात्र तरीका आपके पास जो कुछ भी है उसके साथ बिंदु का अनुकरण करना है।
तो मूल रूप से 3 संभावित समाधान हैं:
उनमें से प्रत्येक में अपनी कमियां हैं
लाइन
function point(x, y, canvas){
canvas.beginPath();
canvas.moveTo(x, y);
canvas.lineTo(x+1, y+1);
canvas.stroke();
}ध्यान रखें कि हम दक्षिण-पूर्व दिशा की ओर आकर्षित कर रहे हैं, और यदि यह बढ़त है, तो समस्या हो सकती है। लेकिन आप किसी अन्य दिशा में भी आकर्षित कर सकते हैं।
आयत
function point(x, y, canvas){
canvas.strokeRect(x,y,1,1);
}या fillRect का उपयोग करते हुए तेज़ तरीके से क्योंकि रेंडर इंजन केवल एक पिक्सेल को भर देगा।
function point(x, y, canvas){
canvas.fillRect(x,y,1,1);
}वृत्त
हलकों के साथ समस्याओं में से एक यह है कि इंजन के लिए उन्हें प्रस्तुत करना कठिन है
function point(x, y, canvas){
canvas.beginPath();
canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
canvas.stroke();
}आयत के समान विचार जो आप भरण से प्राप्त कर सकते हैं।
function point(x, y, canvas){
canvas.beginPath();
canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
canvas.fill();
}इन सभी समाधानों के साथ समस्याएँ:
यदि आप सोच रहे हैं, " एक बिंदु खींचने का सबसे अच्छा तरीका क्या है ? ", मैं भरे हुए आयत के साथ जाऊंगा। आप तुलनात्मक परीक्षण के साथ यहाँ मेरे jsperf देख सकते हैं ।
एक आयत के बारे में क्या? यह एक ImageDataवस्तु बनाने की तुलना में अधिक कुशल है ।
putImageDataतुलना fillRectमें 10x तेज होता है। (अधिक के लिए मेरा उत्तर देखें।)
हम्म, तुम भी सिर्फ 1 पिक्सेल की लंबाई के साथ 1 पिक्सेल चौड़ी लाइन बना सकते हैं और यह एक अक्ष के साथ दिशा की चाल बना सकता है।
ctx.beginPath();
ctx.lineWidth = 1; // one pixel wide
ctx.strokeStyle = rgba(...);
ctx.moveTo(50,25); // positioned at 50,25
ctx.lineTo(51,25); // one pixel long
ctx.stroke();Phrogz को पूरी तरह से उत्तर देने के लिए, के बीच एक महत्वपूर्ण अंतर है fillRect()और putImageData()।
पहले का उपयोग करता संदर्भ आकर्षित करने के लिए अधिक से जोड़ने , एक आयत (नहीं एक पिक्सेल) का उपयोग कर फ़िलस्टाइल अल्फा मूल्य और संदर्भ globalAlpha और परिवर्तन मैट्रिक्स , लाइन टोपियां आदि ..
दूसरे की जगह एक पूरे पिक्सल के सेट (शायद एक है, लेकिन क्यों ;)
परिणाम अलग है जैसा कि आप jsperf पर देख सकते हैं ।
कोई भी एक समय में एक पिक्सेल सेट नहीं करना चाहता (मतलब इसे स्क्रीन पर आरेखण करना)। यही कारण है कि ऐसा करने के लिए कोई विशिष्ट एपीआई नहीं है (और ठीक ही तो)।
प्रदर्शन के अनुसार, यदि लक्ष्य एक तस्वीर उत्पन्न करना है (उदाहरण के लिए एक किरण-अनुरेखण सॉफ्टवेयर), तो आप हमेशा एक सरणी प्राप्त करना चाहते हैं getImageData()जिसके द्वारा एक अनुकूलित Uint8Array है। तब आप putImageData()प्रति सेकंड ONCE या कुछ बार कॉल करके उपयोग करते हैं setTimeout/seTInterval।
fillRectदर्दनाक था क्योंकि क्रोम के h / w त्वरण की आवश्यकता होती है जो GPU के लिए व्यक्तिगत कॉल के साथ सामना नहीं कर सकता है। मैंने 1: 1 पर पिक्सेल डेटा का उपयोग करना समाप्त कर दिया और फिर वांछित उत्पादन प्राप्त करने के लिए CSS स्केलिंग का उपयोग किया। यह बदसूरत है :(
get/putImageDataमिलते हैं, लेकिन 194,893 के लिए fillRect। 1x1 image data125,102 ऑप्स / सेकंड है। इसलिए fillRectफ़ायरफ़ॉक्स में दूर से जीतता है। इसलिए 2012 और आज के बीच चीजें बहुत बदल गईं। हमेशा की तरह, कभी भी पुराने बेंचमार्क परिणामों पर भरोसा न करें।
फास्ट HTML डेमो कोड: SFML C ++ ग्राफिक्स लाइब्रेरी के बारे में मुझे जो पता है उसके आधार पर:
इसे UTF-8 एन्कोडिंग वाली HTML फ़ाइल के रूप में सहेजें और इसे चलाएं। रिफ्लेक्टर के लिए स्वतंत्र महसूस करें, मुझे सिर्फ जापानी चर का उपयोग करना पसंद है क्योंकि वे संक्षिप्त हैं और बहुत जगह नहीं लेते हैं
शायद ही आप एक मनमाना पिक्सेल सेट करना चाहते हैं और इसे स्क्रीन पर प्रदर्शित करना चाहते हैं। तो का उपयोग करें
PutPix(x,y, r,g,b,a) एक बैक-बफर के लिए कई मनमाना पिक्सेल खींचने की विधि। (सस्ते कॉल)
फिर दिखाने के लिए तैयार होने पर, कॉल करें
Apply() परिवर्तनों को प्रदर्शित करने की विधि। (महंगी कॉल)
नीचे पूर्ण .HTML फ़ाइल कोड:
<!DOCTYPE HTML >
<html lang="en">
<head>
<title> back-buffer demo </title>
</head>
<body>
</body>
<script>
//Main function to execute once
//all script is loaded:
function main(){
//Create a canvas:
var canvas;
canvas = attachCanvasToDom();
//Do the pixel setting test:
var test_type = FAST_TEST;
backBufferTest(canvas, test_type);
}
//Constants:
var SLOW_TEST = 1;
var FAST_TEST = 2;
function attachCanvasToDom(){
//Canvas Creation:
//cccccccccccccccccccccccccccccccccccccccccc//
//Create Canvas and append to body:
var can = document.createElement('canvas');
document.body.appendChild(can);
//Make canvas non-zero in size,
//so we can see it:
can.width = 800;
can.height= 600;
//Get the context, fill canvas to get visual:
var ctx = can.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(0,0,can.width-1, can.height-1);
//cccccccccccccccccccccccccccccccccccccccccc//
//Return the canvas that was created:
return can;
}
//THIS OBJECT IS SLOOOOOWW!
// 筆 == "pen"
//T筆 == "Type:Pen"
function T筆(canvas){
//Publicly Exposed Functions
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
this.PutPix = _putPix;
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
if(!canvas){
throw("[NilCanvasGivenToPenConstruct]");
}
var _ctx = canvas.getContext("2d");
//Pixel Setting Test:
// only do this once per page
//絵 =="image"
//資 =="data"
//絵資=="image data"
//筆 =="pen"
var _絵資 = _ctx.createImageData(1,1);
// only do this once per page
var _筆 = _絵資.data;
function _putPix(x,y, r,g,b,a){
_筆[0] = r;
_筆[1] = g;
_筆[2] = b;
_筆[3] = a;
_ctx.putImageData( _絵資, x, y );
}
}
//Back-buffer object, for fast pixel setting:
//尻 =="butt,rear" using to mean "back-buffer"
//T尻=="type: back-buffer"
function T尻(canvas){
//Publicly Exposed Functions
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
this.PutPix = _putPix;
this.Apply = _apply;
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
if(!canvas){
throw("[NilCanvasGivenToPenConstruct]");
}
var _can = canvas;
var _ctx = canvas.getContext("2d");
//Pixel Setting Test:
// only do this once per page
//絵 =="image"
//資 =="data"
//絵資=="image data"
//筆 =="pen"
var _w = _can.width;
var _h = _can.height;
var _絵資 = _ctx.createImageData(_w,_h);
// only do this once per page
var _筆 = _絵資.data;
function _putPix(x,y, r,g,b,a){
//Convert XY to index:
var dex = ( (y*4) *_w) + (x*4);
_筆[dex+0] = r;
_筆[dex+1] = g;
_筆[dex+2] = b;
_筆[dex+3] = a;
}
function _apply(){
_ctx.putImageData( _絵資, 0,0 );
}
}
function backBufferTest(canvas_input, test_type){
var can = canvas_input; //shorthand var.
if(test_type==SLOW_TEST){
var t筆 = new T筆( can );
//Iterate over entire canvas,
//and set pixels:
var x0 = 0;
var x1 = can.width - 1;
var y0 = 0;
var y1 = can.height -1;
for(var x = x0; x <= x1; x++){
for(var y = y0; y <= y1; y++){
t筆.PutPix(
x,y,
x%256, y%256,(x+y)%256, 255
);
}}//next X/Y
}else
if(test_type==FAST_TEST){
var t尻 = new T尻( can );
//Iterate over entire canvas,
//and set pixels:
var x0 = 0;
var x1 = can.width - 1;
var y0 = 0;
var y1 = can.height -1;
for(var x = x0; x <= x1; x++){
for(var y = y0; y <= y1; y++){
t尻.PutPix(
x,y,
x%256, y%256,(x+y)%256, 255
);
}}//next X/Y
//When done setting arbitrary pixels,
//use the apply method to show them
//on screen:
t尻.Apply();
}
}
main();
</script>
</html>यदि आप गति के बारे में चिंतित हैं तो आप WebGL पर भी विचार कर सकते हैं।
HANDY और पुट पिक्सेल (पीपी) समारोह (ES6) (पठन-पिक्सेल का प्रस्ताव यहाँ ):
let pp= ((s='.myCanvas',c=document.querySelector(s),ctx=c.getContext('2d'),id=ctx.createImageData(1,1)) => (x,y,r=0,g=0,b=0,a=255)=>(id.data.set([r,g,b,a]),ctx.putImageData(id, x, y),c))()
pp(10,30,0,0,255,255); // x,y,r,g,b,a ; return canvas objectइस फ़ंक्शन का उपयोग putImageDataऔर प्रारंभिक भाग (पहली लंबी पंक्ति) है। इसके बजाय भीख मांगने पर s='.myCanvas'आप अपने कैनवास पर CSS चयनकर्ता का उपयोग करें।
मैं आपको मापदंडों को सामान्य करने के लिए चाहता हूँ 0-1 से मूल्य के लिए आपको डिफ़ॉल्ट मान a=255को बदलना चाहिए a=1और इसके साथ लाइन में होना चाहिए :
id.data.set([r,g,b,a]),ctx.putImageData(id, x, y)से
id.data.set([r*255,g*255,b*255,a*255]),ctx.putImageData(id, x*c.width, y*c.height)
ऊपर दिया गया आसान कोड, तदर्थ परीक्षण ग्राफिक्स एल्गोरिदम या अवधारणा का प्रमाण बनाने के लिए अच्छा है, लेकिन यह उत्पादन में उपयोग करने के लिए अच्छा नहीं है जहां कोड को पठनीय और स्पष्ट होना चाहिए।
putImageDataशायद देशी की तुलना में तेज है fillRect। मुझे ऐसा लगता है क्योंकि पांचवें पैरामीटर को अलग-अलग तरीके से असाइन किया जा सकता है (आयत रंग), एक स्ट्रिंग का उपयोग करके जिसकी व्याख्या की जानी चाहिए।
मान लीजिए कि आप ऐसा कर रहे हैं:
context.fillRect(x, y, 1, 1, "#fff")
context.fillRect(x, y, 1, 1, "rgba(255, 255, 255, 0.5)")`
context.fillRect(x, y, 1, 1, "rgb(255,255,255)")`
context.fillRect(x, y, 1, 1, "blue")`तो, लाइन
context.fillRect(x, y, 1, 1, "rgba(255, 255, 255, 0.5)")`सभी के बीच सबसे भारी है। fillRectकॉल में पाँचवाँ तर्क थोड़ा लंबा है।
context.fillStyle = ...इसके बजाय उपयोग करना था। developer.mozilla.org/en-US/docs/Web/API/…