test-gcanvas-node

$3

$3

* node 版本 >=10.0
* 系统环境：ubuntu >=18:04
* 工具链:cmake
* 依赖安装
* sudo apt-get update && apt-get install -y libglfw3-dev libgles2-mesa-dev libboost-all-dev libfreetype6-dev libcurl4-openssl-dev libjpeg-dev
* freetype字体库

$3

Dockerfile
``

FROM ubuntu:18.04

ADD ./sources.list /etc/apt/sources.list

RUN apt-get update && apt-get install -y libglfw3-dev libgles2-mesa-dev libboost-all-dev xvfb wget

ADD cmake.zip ./cmake/

RUN apt-get install -y zip && cd ./cmake/ && unzip cmake.zip

ENV PATH="/cmake/cmake/bin/:${PATH}"

RUN apt-get install -y curl && curl -sL https://deb.nodesource.com/setup_10.x | bash -

RUN apt-get install -y nodejs

RUN export DISPLAY=':99.0' && Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &

ADD ./freetype.tar ./freetype/

RUN cd ./freetype/freetype-2.8.1 && ./configure && make && make install

RUN npm config set registry https://registry.npm.taobao.org && npm install -g cmake-js
#install curl-dev lib
RUN apt-get install libcurl4-openssl-dev libjpeg-dev


`

$3

node-canvas使用node-addon的binding的api以及使用cmake-js进行构建。

构建步骤如下

`
npm install cmake-js -g //安装cmake-js
local=true npm install // 安装项目所需要的依赖,local=true表示本地构建
npm run dev // 构建node-addon的binding中间键
`

运行步骤

`
case=app.js npm run test //运行example下的js文件，输出运行结果，可以从导出的png图片中看
case=app.js npm run test-headless//如果没有diplay(系统视窗)环境，可以运行这行
`

$3

* quick start
` javascript

const { createCanvas, Image } = require('bindings')('canvas');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d')

ctx.fillRect(0, 0, 150, 150) // Draw a rectangle with default settings
ctx.save() // Save the default state

ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15, 15, 120, 120) // Draw a rectangle with new settings

ctx.save() // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5
ctx.fillRect(30, 30, 90, 90) // Draw a rectangle with new settings

ctx.restore() // Restore previous state
ctx.fillRect(45, 45, 60, 60) // Draw a rectangle with restored settings

ctx.restore() // Restore original state
ctx.fillRect(60, 60, 30, 30) // Draw a rectangle with restored settings

canvas.createPNG("demo1")
`

* 标准API
* 此项目是Web Canvas API的实现，并尽可能紧密地实现该API。有关API文档，请访问Mozilla Web Canvas API。(有关当前API遵从性，请参阅兼容性状态)
* 标准API支持情况
* function
- getContext()
- fillRect()
- arc()
- arcTo()
- beginPath()
- bezierCurveTo()
- quadraticCurveTo()
- clearRect()
- clip()
- closePath()
- createImageData()
- createLinearGradient()
- createPattern()
- createRadialGradient()
- drawImage()
- ellipse:not support
- fill()
- fillText()
- getImageData()
- getLineDash()
- lineTo()
- measureText()
- moveTo()
- putImageData()
- rect()
- resetTransform()
- restore()
- rotate()
- save()
- scale()
- setLineDash()
- setTransform()
- stroke()
- strokeRect()
- strokeText()
- transform()
- translate()
* propetry
- width
- height
- fillStyle
- font
- globalAlpha
- globalCompositeOperation
- lineCap
- lineDashOffset
- lineJoin
- lineWidth
- miterLimit
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
- strokeStyle
- textAlign
- textBaseline




$3


##### createCanvas
`javascript
createCanvas(width: number, height: number) => Canvas
`
` javascript

let canvas = createCanvas(400, 400);//
`

##### Image
` javascript

img.src: string
img.onload:Function
img.onerror:Function

`

`javascript
const img = new Image()
img.onload = () => {
ctx.drawImage(img, 0, 0);
canvas.createPNG("demo2");
}
img.onerror = err => {
console.log(err)
}
img.src = 'https://alibaba.github.io/GCanvas/assets/logo-gcanvas.png'

`

`javascript
const fs = require('fs')
const path = require('path')
const { createCanvas, Image } = require('bindings')('canvas');
const img = new Image()
const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')

img.onload = () => {
ctx.drawImage(img, 0, 0)
canvas.createPNG("local")
}
img.onerror = err => {
throw err
}

img.src = path.join(__dirname,'images', 'image.png')


`
* ps:img的src现在仅仅支持png格式图片

##### createPNG
`javascript
createPNG(name:string) => void
`
`javascript
let canvas = createCanvas(400, 400);
var ctx = canvas.getContext('2d');
ctx.fillStyle="#ff0000"
ctx.fillRect(0, 0, 150, 150)
canvas.createPNG("demo1") //生成一张png的图片
``