canvas的基本使用

方法

getContext()

getContext()：获取画布上下文对象

<canvas ref="canvasRef"></canvas>
this.canvasRef = this.$refs.canvasRef //获取canvas元素的dom对象
this.ctx = this.canvasRef.getContext('2d') //获得 2d 上下文对象

moveTo(x, y)

moveTo(x, y)：设置线条的起点

lineTo(x, y)

lineTo(x, y)：设置线条的拐点

stroke()

stroke()：绘制线条

beginPath()

beginPath()：新建新的绘制路径

closePath()

closePath()：自动连接起点和终点，形成一个封闭区域

fill()

fill()：通过填充内容绘制实心图形

rect(x, y, width, height)

rect(x, y, width, height)：绘制空心矩形

strokeRect(x, y, width, height)

strokeRect(x, y, width, height)：通过描边的方式绘制空心矩形

fillRect(x, y, width, height)

fillRect(x, y, width, height)：通过填充的方式绘制实心矩形

clearRect(x, y, width, height)

clearRect(x, y, width, height)：清空canvas画布的内容

save()

save()：保存 canvas 状态

restore()

restore()：恢复 canvas 状态

属性

strokeStyle

strokeStyle：设置线条的颜色

lineWidth

lineWidth：设置线条的粗细

lineCap

lineCap：设置线条两端的样式 butt (默认) | round | square

lineJoin

lineCap：设置两条线条相交的拐点样式 miter (默认) | bevel | round

fillStyle

fillStyle：设置填充色

shadowColor

shadowColor：设置阴影的颜色

shadowBlur

shadowBlur：设置阴影的粗细

uniapp获取canvas对象

	  <canvas
		class="canvas"
		canvas-id="canvasId"
		width="600"
		height="400"
	  ></canvas>

		onReady(){
			var ctx = uni.createCanvasContext('canvasId', this)
		}