小程序开放平台

文档中心
基础
路由
跳转
转发
界面
网络
支付
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
第三方平台
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext
setFillStyle
setStrokeStyle
setShadow
createLinearGradient
createCircularGradient
addColorStop
setLineWidth
setLineCap
setLineJoin
setLineDash
setMiterLimit
rect
fillRect
strokeRect
clearRect
fill
stroke
beginPath
closePath
moveTo
lineTo
arc
scale
rotate
translate
setFontSize
fillText
setTextAlign
setTextBaseline
drawImage
setGlobalAlpha
measureText
strokeText
setLineDashOffset
bezierCurveTo
quadraticCurveTo
save
restore
draw
setTransform

xhs.draw

开发
>
JS API
>
画布
>
CanvasContext
>
draw
>
更新时间:2024-11-13 19:05:33

将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

参数

属性
类型
默认值
必填
说明
最低版本
reserveBooleanfalse本次绘制是否接着上一次绘制,即 reserve 参数为 false ,则在本次调用 drawCanvas 绘制之前 native 层应先清空画布再继续绘制;若 reserver 参数为 true ,则保留当前画布上的内容,本次调用 drawCanvas 绘制的内容覆盖在上面
callbackFunction绘制完成后回调水平倾斜

示例代码

Page({
    onLoad() {
        const canvasContext = xhs.createCanvasContext('myCanvas');
        canvasContext.setFillStyle('blue');
        canvasContext.fillRect(10, 10, 150, 100);
        canvasContext.draw();
        canvasContext.fillRect(30, 30, 150, 100);
        canvasContext.draw();
    }
});
Page({
    onLoad() {
        const canvasContext = xhs.createCanvasContext('myCanvas');
        canvasContext.setFillStyle('blue');
        canvasContext.fillRect(10, 10, 150, 100);
        canvasContext.draw();
        canvasContext.setFillStyle('red');
        canvasContext.fillRect(30, 30, 150, 100);
        canvasContext.draw(true);
    }
});
该文档是否对您有帮助?