CanvasContext.stroke

2020-09-14 15:19 更新

简介

CanvasContext.stroke 用于画出当前路径的边框。

使用限制

stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去,请参见示例代码 2。

扫码体验

undefined

效果示例

画布.gif

示例代码

示例代码 1

  1. const ctx = my.createCanvasContext('canvas')
  2. ctx.moveTo(10, 10)
  3. ctx.lineTo(100, 10)
  4. ctx.lineTo(100, 100)
  5. ctx.stroke()
  6. ctx.draw()

显示效果如下图所示: ctx.stroke.png

示例代码 2

  1. const ctx = my.createCanvasContext('canvas');
  2. ctx.rect(10, 10, 100, 30)
  3. ctx.setStrokeStyle('yellow')
  4. ctx.stroke()
  5. ctx.beginPath()
  6. ctx.rect(10, 40, 100, 30)
  7. ctx.setStrokeStyle('blue')
  8. ctx.strokeRect(10, 70, 100, 30)
  9. ctx.rect(10, 100, 100, 30)
  10. ctx.setStrokeStyle('red')
  11. ctx.stroke()
  12. ctx.draw()

显示效果如下所示: ctx.stroke2.png

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号