参考 drawingContext

drawingContext

A system variable that provides direct access to the sketch's <canvas></canvas> element.

The <canvas></canvas> element provides many specialized features that aren't included in the p5.js library. The drawingContext system variable provides access to these features by exposing the sketch's CanvasRenderingContext2D object.

示例

function setup() {
createCanvas(100, 100);

background(180);

// Style the circle using shadows.
drawingContext.shadowOffsetX = 5;
drawingContext.shadowOffsetY = -5;
drawingContext.shadowBlur = 10;
drawingContext.shadowColor = 'black';

// Draw the circle.
circle(50, 50, 40);

describe("A white circle on a gray background. The circle's edges are shadowy.");
}
function setup() {
createCanvas(100, 100);

background('skyblue');

// Style the circle using a color gradient.
let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);
myGradient.addColorStop(0, 'yellow');
myGradient.addColorStop(0.6, 'orangered');
myGradient.addColorStop(1, 'yellow');
drawingContext.fillStyle = myGradient;
drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';

// Draw the circle.
circle(50, 50, 40);

describe('A fiery sun drawn on a light blue background.');
}
Notice any errors or typos? Please let us know. Please feel free to edit src/core/rendering.js and open a pull request!

相关参考

Complete your gift to make an impact