首页 > 其他分享 >CanvasContext.clearRect

CanvasContext.clearRect

时间:2025-01-05 11:35:22浏览次数:7  
标签:150 CanvasContext ctx number 矩形 clearRect

CanvasContext.clearRect(number x, number y, number width, number height)

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

小程序插件:支持

相关文档: 旧版画布迁移指南canvas 组件介绍

功能描述

清除画布上在该矩形区域内的内容

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

clearRect 并非画一个白色的矩形在地址区域,而是清空,为了有直观感受,对 canvas 加了一层背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

img

标签:150,CanvasContext,ctx,number,矩形,clearRect
From: https://www.cnblogs.com/AtlasLapetos/p/18630567

相关文章

  • CanvasContext.bezierCurveTo
    CanvasContext.bezierCurveTo(numbercp1x,numbercp1y,numbercp2x,numbercp2y,numberx,numbery)CanvasContext是旧版的接口,新版Canvas2D接口与Web一致从基础库2.9.0开始,本接口停止维护,请使用RenderingContext代替小程序插件:支持相关文档:旧版画布迁移......
  • CanvasContext.beginPath
    CanvasContext.beginPath()CanvasContext是旧版的接口,新版Canvas2D接口与Web一致从基础库2.9.0开始,本接口停止维护,请使用RenderingContext代替小程序插件:支持相关文档:旧版画布迁移指南、canvas组件介绍功能描述开始创建一个路径。需要调用fill或者strok......
  • wx.createCanvasContext
    CanvasContextwx.createCanvasContext(stringcanvasId,Objectthis)从基础库2.9.0开始,本接口停止维护,请使用Canvas代替小程序插件:支持,需要小程序基础库版本不低于1.9.6微信Windows版:支持微信Mac版:支持微信鸿蒙OS版:支持相关文档:旧版画布迁移指南、canvas......
  • canvas 里面的 clearRect 的方法论
    ‌在Canvas中清除内容可以使用clearRect方法。https://turfjs.fenxianglu.cn/docs/next/api/bbox......
  • 解决canvas上fillText填充后用clearRect清除失效,文字重叠问题
    最初写的demo:如下图: 文字内容未被清除掉,出现了重叠的问题,尝试了网上说的ctx.save(),ctx.restore(),beginPath()等方法都不好用,后来经过一番查找,终于解决了:改写如下: 在这里需要主要的点就是fillText的方法里参数表示的真正含义: 默认情况下,文本基线是位于文字底部,所......