代码拉取完成,页面将自动刷新
<!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>基础笔刷 BaseBrush</title>
</head>
<body>
<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>
<script src="../../script/fabric.js"></script>
<script>
const canvas = new fabric.Canvas('c')
canvas.freeDrawingBrush.width = 20 // 画笔宽度
canvas.freeDrawingBrush.color = 'pink' // 画笔颜色
canvas.freeDrawingBrush.limitedToCanvasSize = true // 能否超出当前画板
canvas.freeDrawingBrush.strokeDashArray = [20, 50] // 行程破折号数组
// 画笔投影
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
blur: 10,
offsetX: 10,
offsetY: 10,
affectStroke: true,
color: '#30e3ca'
})
canvas.freeDrawingBrush.strokeLineCap = 'round' // 线条结尾的画笔风格 butt | round | square , default round
canvas.freeDrawingBrush.strokeLineJoin = 'miter' // 画笔的角落风格 bevel | round | miter
canvas.freeDrawingBrush.strokeMiterLimit = 100 // 最大斜接长度
canvas.isDrawingMode = true
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。