4

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

1 件の回答 1

4

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

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

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

<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。