I am using processing.js, but I would like to use gradation in that drawing.For example http://processingjs.org/learning/basic/lineargradient/, drawing lines one by one seems inefficient.Is there any other good way?
processing
I've been wandering around a lot, but processing.js doesn't seem to have an efficient gradation implementation...
I saw a post saying that I had no choice but to give up and use HTML5 gradient.
Therefore, I think it would be better to bring the canvas context and use createLinearGradient as usual, but what do you think? According to the section Accessing the Raw Canvas Context-Advanced: in Understanding Rendering Modes in Processing.js, you can access the canvas/context using the externals keyword.
<html>
<head>
<script src="processing.js">
</script>
<script>
window.onload=function(){
varcanvas= document.getElementsByTagName('canvas')[0];
varcodeElm= document.getElementById('processing-code');
varcode=codeElm.textContent||codeElm.innerText;
new Processing (canvas, code);
};
</script>
<script id="processing-code" type="application/processing">
void setup() {
size (externals.canvas.width, externals.canvas.height);
frameRate(60);
}
void draw() {
var currentContext=externals.context;
currentContext.beginPath();
vargradient=currentContext.createLinearGradient(0,0,0,canvas.height);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1,'blue');
currentContext.fillStyle=gradient;
currentContext.rect(0,0,canvas.width,canvas.height);
currentContext.fill();
else (width/2, height/2,100,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="250" height="250">/canvas>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.