javascript - NodeJs Canvas 没有出现
问题描述
我正在使用以下代码安装节点 js 画布 API:
npm install canvas --save
我已经编写了用于显示画布的代码,但它没有显示任何内容。该代码在执行时不显示错误:
const { createCanvas } = require('canvas')
const width = 1200
const height = 600
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')
context.fillStyle = '#fff'
context.fillRect(0, 0, width, height)
解决方案
这个包为我们提供了一个基于 Node.js 的Canvas API实现,我们在浏览器中了解并喜欢它。
除了从 HTML 元素中获取Canvas实例之外<canvas>
,我们加载库,从中获取函数createCanvas
。
例子:
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')
ctx.rotate(0.1)
ctx.fillText('Awesome!', 50, 100)
// Draw line under text
var text = ctx.measureText('Awesome!')
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()
// Draw cat with lime helmet
loadImage('./imgs.jpg').then((image) => {
ctx.drawImage(image, 50, 0, 70, 70)
console.log('<img src="' + canvas.toDataURL() + '" />')
})
推荐阅读
- r - R中的数据操作和结构
- apache-kafka - Clickhouse:无法连接到 kafka 代理
- c# - Visual Studio 2017 TestMethod 运行时没有错误,就在之后
- java - Java:在json字符串中转义html实体
- javascript - 使用新添加的类触发函数
- python - 使用 beautifulsoup 获取页面数
- html - 表格的第一列占用太多宽度?
- php - 在运行 composer install 时处理“系统中缺少请求的 PHP 扩展 pdo_sqlite。”
- php - 编辑行上的错误 404 - 背包 crud- Laravel
- android - 我如何知道 TalkBack 何时完成宣布 ViewPager 页面更改?