Skip to content

nap-liu/draw-html-to-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

draw html to canvas

使用html+css语法绘制图片到canvas上

安装

npm i draw-html-to-canvas --save

渲染效果

电脑端渲染效果图
上半部分为浏览器效果
下半部分为渲染效果

微信开发者工具渲染效果图

微信真机渲染效果图

使用方法

纯页面使用方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>draw html to canvas</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="node_modules/draw-html-to-canvas/dist/index.umd.js"></script>
<script>
  ;(async function() {
    const DrawHtml2Canvas = window.DrawHtml2Canvas.default;

    const html = `<div style="border: 1px solid #f00">draw to canvas</div>`;

    const render = DrawHtml2Canvas.fromHTML(html);

    // 设置网页最大宽度
    render.rootNode.style.set('width', '500px');

    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext('2d');

    // 加载html中使用的图片
    await render.loadSource();

    // 计算布局
    render.layout(ctx);

    // 获取网页尺寸
    const {offsetWidth, offsetHeight} = render.rootNode;

    // 高清适配
    ctx.save();
    canvas.height = offsetHeight * window.devicePixelRatio;
    canvas.width = offsetWidth * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

    // 绘制图像到canvas上
    render.draw(ctx);

    ctx.restore();
  })();
</script>
</html>

web工程使用方法

import Render from 'draw-html-to-canvas';

const html = `<div>draw to canvas</div>`
const render = Render.fromHTML(html);

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

// 修改网页最大宽度为500px
render.rootNode.style.set('width', '500px');

// 加载html中使用的图片
await render.loadSource();

// 计算布局
render.layout(ctx);

// 获取网页尺寸
const {offsetWidth, offsetHeight} = render.rootNode;

// 高清适配
ctx.save();
canvas.height = offsetHeight * window.devicePixelRatio;
canvas.width = offsetWidth * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

// 绘制图像到canvas上
render.draw(ctx);

ctx.restore();

微信小程序

渲染效果的截图的代码片段
最低支持1.9的基础库
2.9以上可以使用同层渲染 推荐使用同层渲染api

在线代码片段

采用float布局系统

block 独占一行
inline-block 行内布局超长自动换行
inline 行内布局超长自动换行
内置了常见的标签识别

支持标签

标签支持 默认布局 默认行为
div block
img inline-block img元素会自动加载图片
span inline

支持样式

样式属性 有效值 特性
display block\inline-block\inline
float left\right
clear 任意值都是both
width 绝对值
height 绝对值
padding 绝对值
margin 绝对值\支持 margin: 0 auto; 居中对齐
position relative\absolute
top 绝对值 绝对定位有效
right 绝对值 绝对定位有效
bottom 绝对值 绝对定位有效
left 绝对值 绝对定位有效
z-index 同block下所有的值拉平计算优先级
color 支持 rgba\rgb#xxx\transparent
border 全功能
border-style 只支持 solid\dashed
border-radius 全功能
background 全功能 支持多重背景 简写、全写、支持线性渐变
font-style 绝对值
font-variant 绝对值
font-weight 绝对值
font-stretch 绝对值
font-size 绝对值
font-family 绝对值
text-decoration 全写、简写
text-decoration-color color支持的范围
text-decoration-style 只支持 solid\double
text-decoration-thichness 绝对值
text-decoration-line underline\overline\line-through
line-height 固定值、倍数
text-align 全功能
opacity 全功能

LiveDemo

在线示例

About

根据html+css规范绘制 网页到canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published