小程序画布Canvas 绘图上下文RenderingContext

RenderingContext

Canvas 绘图上下文。

  • 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象,实现了 HTML Canvas 2D Context 定义的属性、方法。
  • 通过 Canvas.getContext('webgl') 或 OffscreenCanvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象,实现了 WebGL 1.0 定义的所有属性、方法、常量。
  • CanvasRenderingContext2D 的 drawImage 方法 2.10.0 起支持传入通过 SelectorQuery 获取的 video 对象

示例代码

video 画到 2D Canvas 示例 在开发者工具中预览效果

分类小程序画布功能相关推荐:

小程序画布创建离屏 canvas 实例wx.createOffscreenCanvas 小程序创建 canvas 的绘图上下文 CanvasContext 对象wx.createCanvasContext 小程序画布生成图片wx.canvasToTempFilePath 小程序将像素数据绘制到画布wx.canvasPutImageData 小程序获取 canvas 区域隐含的像素数据wx.canvasGetImageData 小程序Canvas的使用方法 小程序画布返回 Canvas 的绘图上下文Canvas.getContext 小程序画布创建一个图片对象Canvas.createImage 小程序画布重绘Canvas.requestAnimationFrame 小程序取消由 requestAnimationFrame 添加到计划中的动画帧请求Canvas.cancelAnimationFrame 小程序画布创建一个 ImageData 对象Canvas.createImageData 小程序画布创建 Path2D 对象Canvas.createPath2D 小程序画布犯创建图片展示的 data URI Canvas.toDataURL 小程序canvas 组件的绘图上下文CanvasContext 小程序画布draw用法CanvasContext.draw 小程序画布创建一个线性的渐变颜色CanvasContext.createLinearGradient 小程序创建一个圆形的渐变颜色CanvasContext.createCircularGradient 小程序画布对指定的图像创建模式的方法CanvasContext.createPattern 小程序画布测量文本尺寸信息CanvasContext.measureText 小程序画布保存绘图上下文CanvasContext.save 小程序画布恢复之前保存的绘图上下文 小程序画布开始创建一个路径CanvasContext.beginPath 小程序把路径移动到画布中的指定点CanvasContext.moveTo 小程序画布增加一个新点CanvasContext.lineTo 小程序画布创建二次贝塞尔曲线路径CanvasContext.quadraticCurveTo 小程序创建三次方贝塞尔曲线路径CanvasContext.bezierCurveTo 小程序画布创建一条弧线CanvasContext.arc 小程序创建一个矩形路径CanvasContext.rect 小程序画布根据控制点和半径绘制圆弧路径CanvasContext.arcTo 小程序画布裁剪任意形状和尺寸CanvasContext.clip 小程序画布填充一个矩形CanvasContext.fillRect 小程序画布画一个非填充矩形CanvasContext.strokeRect 小程序画布清除画布上矩形区域内的内容CanvasContext.clearRect 小程序画布对路径中的内容进行填充CanvasContext.fill 小程序画布画出当前路径的边框CanvasContext.stroke 小程序画布关闭一个路径CanvasContext.closePath 小程序画布路径缩放CanvasContext.scale 小程序画布旋转 小程序画布变化画布圆点位置 小程序画布绘制图像到画布CanvasContext.drawImage 小程序画布绘制文本描边 小程序使用矩阵多次叠加当前变换的方法CanvasContext.transform 小程序使用矩阵设置当前变换的方法CanvasContext.setTransform 小程序画布设置填充色CanvasContext.setFillStyle 小程序画布设置描边颜色CanvasContext.setStrokeStyle 小程序画布设定阴影样式CanvasContext.setShadow 小程序画布设置全局画笔透明度CanvasContext.setGlobalAlpha 小程序画笔设置线条的宽度CanvasContext.setLineWidth 小程序画布设置线条的交点样式CanvasContext.setLineJoin 小程序画布设置线条的端点样式CanvasContext.setLineCap 小程序画笔设置虚线样式CanvasContext.setLineDash 小程序画布设置最大斜接长度CanvasContext.setMiterLimit 小程序画布在画布上绘制文本CanvasContext.fillText 小程序画布设置字体大小 小程序画布设置文字的对齐方式CanvasContext.setTextAlign 小程序画布设置文字的竖直对齐 小程序画布渐变对象CanvasGradient 小程序画布添加颜色的渐变点CanvasGradient.addColorStop 小程序画布颜色Color 小程序画布图片对象Image 小程序画布ImageData 对象 小程序画布离屏 canvas 实例OffscreenCanvas 小程序画布创建一个图片对象OffscreenCanvas.createImage 小程序画布获取OffscreenCanvas 的绘图上下文OffscreenCanvas.getContext 小程序画布Path2D 小程序画布Canvas 绘图上下文RenderingContext