小程序画布设置线条的交点样式CanvasContext.setLineJoin

CanvasContext.setLineJoin(string lineJoin)

设置线条的交点样式

从基础库 1.9.90 开始，本接口停止维护，请使用 CanvasContext.lineJoin 代替

小程序插件：支持

参数

string lineJoin

线条的结束交点样式

lineJoin 的合法值

值	说明	最低版本
bevel	斜角
round	圆角
miter	尖角

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()
 
ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()
 
ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()
 
ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()
 
ctx.draw()

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

小程序画布创建离屏 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

热门教程导航

Linux命令大全

CSS3教程文档

CSS参考手册

CSS教程文档

微信小程序开发指南

HTML 参考手册

HTML教程文档

Java从入门到放弃

HTML5 & CSS3 酷炫实战专栏

Laravel - MySQL数据库的使用详解

kotlin开发中文手册

Vue教程文档

Android 5.0 面向开发者的 Material Design