

processing.js を使っているのですが、その描画でグラデーションを使いたいです。この例
<http://processingjs.org/learning/basic/lineargradient/>
のように線を一本づつ描くと効率が悪いように思えます。他に何か良い手はありませんでしょうか？


CC BY-SA 3.0
2014-12-03T01:04:41.550
284
2014-12-03T23:38:33.623
2014-12-03T23:38:33.623
46
658
question
processing
processing.js でグラデーションを使った描画をしたい


いろいろ彷徨ってみましたが、processing.jsには効率の良いグラデーションの実装がないようですね...

諦めてHTML5のgradientを使うしかない、という投稿を見ました。

  * [Question about gradient fill](https://groups.google.com/forum/#!topic/processingjs/BeryyzkQ31I)
  * [線形グラデーションを指定する](http://www.html5.jp/canvas/how4.html)

そんなわけで、普通にcanvasのcontextとってきてcreateLinearGradient使えばいいのかなと思いますが、いかがでしょうか。
[Understanding Rendering Modes in
Processing.js](http://processingjs.org/articles/RenderingModes.html)のAccessing
the Raw Canvas Context -
Advanced:という項によれば、externalsキーワードを使うとcanvas/contextにアクセスできるようです。

[code]

    <html>
        <head>
           <script src="processing.js">
           </script>
           <script>
             window.onload = function(){
               var canvas = document.getElementsByTagName('canvas')[0];
               var codeElm = document.getElementById('processing-code');
               var code = 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();
               var gradient  = 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();
               ellipse(width/2, height/2, 100, 100);
             }
           </script>      
        </head>
        <body>
        <canvas id="canvas" width="250" height="250"></canvas>
        </body>
    </html>
    
[/code]


CC BY-SA 3.0
2014-12-03T18:14:37.240
322
2014-12-03T19:00:38.063
2014-12-03T19:00:38.063
351
351
284
answer