canvas的基本使用

const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 400;
const ctx = canvas.getContext("2d");

1
2
3
4

# 设置绘制颜色

ctx.fillStyle = "#FF0000";

# 绘制文本

// 设置文字属性
// 语法：style variant weight font-size/line-height family caption icon menu message-box small-caption status-bar
ctx.font = "30px Arial";
// 设置绘制的文本及位置
ctx.fillText("Hello World", 10, 50);

1
2
3
4
5

# 文本居中

ctx.textAlign = "center"
ctx.fillText("Hello World", '宽度的一半', 50);

1
2

# 文本垂直翻转

// 设置变换中心店
ctx.translate(1240, 900)
// 翻转180度
const deg = Math.PI / 180 * 180
ctx.rotate(deg, deg)
ctx.fillStyle = '#000000'
ctx.font="430px xique";
ctx.fillText('文本内容', 0, 0)

1
2
3
4
5
6
7
8

# 添加图片

const image = new Image();
// 使用的图片不在同一域名下时，要想使用toDataURL必须加上跨域
image.setAttribute("crossOrigin", "anonymous");
image.src = "图片地址";
image.onload = () => {
  // 绘制图片
  ctx.drawImage(image, 0, 0);
  // 获取图片地址可以直接赋值给img
  canvas.toDataURL("image/png");
};

const image = document.getElementById('image')
ctx.drawImage(image, 0, 0);

1
2
3
4
5
6
7
8
9
10
11
12
13

# node中操作canvas

npm i canvas

const { createCanvas, loadImage, registerFont } = require('canvas');

// 创建画布
const canvas = createCanvas(629, 629)
const ctx = canvas.getContext('2d')

// 注册字体文件
registerFont(path.resolve(__dirname, './font.ttf'), {family: 'xique'})
ctx.font="120px xique";

// 加载图片绘制
const image = await loadImage(path.resolve(__dirname, 'template.png'))
ctx.drawImage(image, 0,0, 629, 629)

1
2
3
4
5
6
7
8
9
10
11
12
13

# 绘制二维码

安装

npm i qrcode

const {loadImage} = require('canvas');
const qrcode = require('qrcode')
// 生成二维码
qrcode.toBuffer(url, {
    width: 210,
    height: 210,
    margin: 2,
    color: {
        dark: '#bf342cff'
    }
},async function(e, code){
    console.log(name, num, url, dir);
    loadImage(code).then(res => {
        ctx.drawImage(res,  70, 250, res.width, res.height)
        fs.writeFileSync(`${dir}/${name}(${num}).png`, canvas.toBuffer())
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 绘制形状

# 绘制填充矩形

ctx.fillStyle = '#ff0000'
ctx.fillRect(x,y,width, height)

1
2

# Api

# ctx.translate(x, y) 重新映射画布上的 (0,0) 位置

# ctx.clearRect(x, y, width, height) 在给定区域内清空一个矩形

x: 要清楚的矩形左上角的x坐标
y: 要清除的矩形左上角的y坐标
width: 要清除的矩形的宽度，像素
height: 要清除的矩形的高度，像素

ctx.fillStyle="red";
ctx.fillRect(0,0,100,100);
ctx.clearRect(20,20,50,50);

1
2
3

#html #canvas

上次更新: 2023/09/22, 16:54:32

← h5操作媒体设备(音频和视频) 手机网页自适应→