I want to draw using gradation in processing.js.

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

2022-09-29 22:03

1 Answers

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>

2022-09-29 22:03

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656