学习使用 Canvas Sketch（一） |
您所在的位置：网站首页 › GNUPLOT三维配置命令 › 学习使用 Canvas Sketch（一） |
学习使用 Canvas Sketch（一）
|
本文内容整理自Frontend Master《Creative Coding with Canvas & WebGL》，这是一门教授如何使用 ThreeJS、Canvas 和 WebGL 的课程，学习这门课程可以了解有关生成艺术，交互式动画，ThreeJS 中的 3D 图形以及 GLSL 中的自定义着色器等知识。这些是创意开发工作背后的基本概念，包括VR / AR应用程序，游戏，艺术装置，交互式Web体验以及各种其他形式的计算艺术。 课程链接：https://frontendmasters.com/courses/canvas-webgl/ Github: https://github.com/mattdesl/workshop-generative-art 安装 canvas-sketch-clicanvas-sketch-cli 是一个命令行工具，同时也是一个js库。 安装环境要求 Node.js 8+ 和 npm 5+。 npm install canvas-sketch-cli --global创建一个Sketchcanvas-sketch src/my-new-sketch.js --new --open这个命令会创建一个node项目，同时在src目录下创建一个 my-new-sketch.js 文件，并且会自动打开浏览器，访问 http://localhost:9966 my-new-sketch.js 代码如下： const canvasSketch = require('canvas-sketch'); const settings = { dimensions: [ 2048, 2048 ] }; const sketch = () => { return ({ context, width, height }) => { context.fillStyle = 'white'; context.fillRect(0, 0, width, height); }; }; canvasSketch(sketch, settings); Canvas画布配置我们使用 Canvas Sketch 提供的 canvasSketch API 创建画布，这个方法接收两个参数，默认命名为 sketch 和 settings， settings 是画布配置项，而我们在 sketch 方法里作画，sketch 函数返回一个匿名函数，把图画渲染到 canvas 画布上。。 const canvasSketch = require( 'canvas-sketch' ); canvasSketch( sketch, settings );settings 配置项可以通过 dimensions 配置画布大小，默认为 [ 2048, 2048 ]，代表长宽分别为2048像素。可以把值设置为各种纸张，如 A4纸大小 'A4'、信纸 'letter'、明信片 'postCard' 等。 我们可以导出 canvas 画布为 png 图片，图片质量由 pixelsPerInch （单位像素点）属性控制，默认为72，如果需要打印，建议设置为300。 units 是长度单位，默认为像素，可以设置为厘米等。 画布默认是竖向的，可以通过 orientation 属性设置为横向。 第一幅作品我们还要用到 canvas 的 API， 可以查看MDN文档： Canvas：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API const canvasSketch = require( 'canvas-sketch' ); const settings = { dimensions: 'A4', // 'A4','postCard', [ 2048, 2048 ], 'letter' pixelsPerInch: 300, // 单位像素点，用于设置导出图片的质量 units: 'cm', // 长度单位 // orientation: 'landscape' // 画布方向 }; const sketch = () => { return ( { context, width, height } ) => { // Rectangle // 使用 canvas API 画方块 context.fillStyle = 'green'; context.fillRect( 0, 0, width, height ); // Circle // 使用 canvas API 画圆 context.beginPath() // context.arc( width / 2, height / 2, 200, 0, Math.PI * 2, false ); // 使用像素 context.arc( width / 2, height / 2, width * 0.2, 0, Math.PI * 2, false ); // 长宽按画布比例给 context.fillStyle = 'white'; context.fill(); context.lineWidth = width * 0.1; context.strokeStyle = 'blue'; context.stroke() }; }; canvasSketch( sketch, settings ); 预览效果  画布里的格子 — Grid在项目里安装 canvas-sketch-util 插件： 插件地址： https://github.com/mattdesl/canvas-sketch-util npm install canvas-sketch-util --saveCanvas-sketch-util 插件提供了一些非常实用模块： math - 数学和插值random - 随机数生成器color - RGB 和 HSL 颜色geometry - 几何和形状penplot - 与钢笔绘图机（例如 AxiDraw）相关的实用程序shader - 全屏 GLSL 着色器实用程序我们将用到 math 模块提供的 lerp 方法，使用参数 t （0 ~ 1 范围内） 在 min 和 max 之间进行线性插值，以调整边距效果。 这一次我们要画出5行5列一共25个小圆点。  实现代码： const canvasSketch = require( 'canvas-sketch' ); const { lerp } = require( 'canvas-sketch-util/math' ) const settings = { dimensions: [ 2048, 2048 ] }; const sketch = () => { // 25组坐标点 const createGrid = () => { const points = []; const count = 5; for ( let x = 0; x |
【本文地址】
今日新闻 |
推荐新闻 |