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