html5生成图片、海报 canvas 2d画布的应用

使用html2canvas时，当页面滚动位置发生变化，生成的图片会出现位置偏差，使用原生的canvas来生成图片则能更直观的看到图片生成的结果。

Draw.js
适用于浏览器的快速生成海报的 Javascript 库
Gzip 1.86KB
Github/文档：https://github.com/HeartCNC/drawjs

常用API

• fill() 填充
• stroke() 线条
• save() 保存当前环境的状态
• restore() 返回之前保存过的路径状态和属性

颜色和属性

• fillStyle 填充颜色
• strokeStyle 线条颜色
• font 字体样式
• textAlign

以下canvas表示获取到的dom，cxt = canvas.getContext('2d')
设置canvas.width = 750, canvas.height = 1334 （移动端常见设计稿尺寸）

绘制图形

矩形

fillRect(x,y,width,height)

• x 矩形左上角的 x 坐标
• y 矩形左上角的 y 坐标
• width 矩形的宽度，以像素计
• height 矩形的高度，以像素计

cxt.fillStyle = 'blue'
cxt.fillRect(100, 20, 150, 100)
// 或者
cxt.rect(100, 20, 150, 100)
cxt.fill()
// 加边框
cxt.strokeStyle = '#000000'
cxt.stroke()

绘制图片

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)