canvas.vue

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-common-mt">
			<canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
			<scroll-view class="canvas-buttons" scroll-y="true">
				<block v-for="(name, index) in names" :key="index">
					<button class="canvas-button" @click="handleCanvasButton(name)">{{name}}</button>
				</block>
				<button class="canvas-button" @click="toTempFilePath" type="primary">toTempFilePath</button>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	var context = null;
	export default {
		data() {
			return {
				title: 'createContext',
				names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill",
					"stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc",
					"quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha",
					"setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit"
				]
			}
		},
		onReady: function() {
			context = uni.createCanvasContext('canvas',this)
		},
		methods: {
			toTempFilePath: function() {
				uni.canvasToTempFilePath({
					canvasId: 'canvas',
					success: function(res) {
						console.log(res.tempFilePath)
					},
					fail: function(err) {
						console.error(JSON.stringify(err))
					}
				})
			},
			handleCanvasButton: function(name) {
				this[name] && this[name]();
			},
			rotate: function() {
				context.beginPath()
				context.rotate(10 * Math.PI / 180)
				context.rect(225, 75, 20, 10)
				context.fill()
				context.draw()
			},
			scale: function() {
				context.beginPath()
				context.rect(25, 25, 50, 50)
				context.stroke()

				context.scale(2, 2)

				context.beginPath()
				context.rect(25, 25, 50, 50)
				context.stroke()
				context.draw()
			},
			reset: function() {
				context.beginPath()

				context.setFillStyle('#000000')
				context.setStrokeStyle('#000000')
				context.setFontSize(10)
				context.setGlobalAlpha(1)
				context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')

				context.setLineCap('butt')
				context.setLineJoin('miter')
				context.setLineWidth(1)
				context.setMiterLimit(10)
				context.draw()
			},
			translate: function() {
				context.beginPath()
				context.rect(10, 10, 100, 50)
				context.fill()

				context.translate(70, 70)

				context.beginPath()
				context.fill()
				context.draw()
			},
			save: function() {
				context.beginPath()
				context.setStrokeStyle('#00ff00')
				context.save()

				context.scale(2, 2)
				context.setStrokeStyle('#ff0000')
				context.rect(0, 0, 100, 100)
				context.stroke()
				context.restore()

				context.rect(0, 0, 50, 50)
				context.stroke()
				context.draw()
			},
			restore: function() {
				[3, 2, 1].forEach(function(item) {
					context.beginPath()
					context.save()
					context.scale(item, item)
					context.rect(10, 10, 100, 100)
					context.stroke()
					context.restore()
				});
				context.draw()
			},
			drawImage: function() {
				// #ifdef APP-PLUS
				context.drawImage('../../../static/app-plus/uni@2x.png', 0, 0)
				// #endif
				// #ifndef APP-PLUS
				context.drawImage('../../../static/uni.png', 0, 0)
				// #endif
				context.draw()
			},
			fillText: function() {
				context.setStrokeStyle('#ff0000')

				context.beginPath()
				context.moveTo(0, 10)
				context.lineTo(300, 10)
				context.stroke()
				// context.save()
				// context.scale(1.5, 1.5)
				// context.translate(20, 20)
				context.setFontSize(10)
				context.fillText('Hello World', 0, 30)
				context.setFontSize(20)
				context.fillText('Hello World', 100, 30)

				// context.restore()

				context.beginPath()
				context.moveTo(0, 30)
				context.lineTo(300, 30)
				context.stroke()
				context.draw()
			},
			fill: function() {
				context.beginPath()
				context.rect(20, 20, 150, 100)
				context.setStrokeStyle('#00ff00')
				context.fill()
				context.draw()
			},
			stroke: function() {
				context.beginPath()
				context.moveTo(20, 20)
				context.lineTo(20, 100)
				context.lineTo(70, 100)
				context.setStrokeStyle('#00ff00')
				context.stroke()
				context.draw()
			},
			clearRect: function() {
				context.setFillStyle('#ff0000')
				context.beginPath()
				context.rect(0, 0, 300, 150)
				context.fill()
				context.clearRect(20, 20, 100, 50)
				context.draw()
			},
			beginPath: function() {
				context.beginPath()
				context.setLineWidth(5)
				context.setStrokeStyle('#ff0000')
				context.moveTo(0, 75)
				context.lineTo(250, 75)
				context.stroke()
				context.beginPath()
				context.setStrokeStyle('#0000ff')
				context.moveTo(50, 0)
				context.lineTo(150, 130)
				context.stroke()
				context.draw()
			},
			closePath: function() {
				context.beginPath()
				context.setLineWidth(1)
				context.moveTo(20, 20)
				context.lineTo(20, 100)
				context.lineTo(70, 100)
				context.closePath()
				context.stroke()
				context.draw()
			},
			moveTo: function() {
				context.beginPath()
				context.moveTo(0, 0)
				context.lineTo(300, 150)
				context.stroke()
				context.draw()
			},
			lineTo: function() {
				context.beginPath()
				context.moveTo(20, 20)
				context.lineTo(20, 100)
				context.lineTo(70, 100)
				context.stroke()
				context.draw()
			},
			rect: function() {
				context.beginPath()
				context.rect(20, 20, 150, 100)
				context.stroke()
				context.draw()
			},
			arc: function() {
				context.beginPath()
				context.setLineWidth(2)
				context.arc(75, 75, 50, 0, Math.PI * 2, true)
				context.moveTo(110, 75)
				context.arc(75, 75, 35, 0, Math.PI, false)
				context.moveTo(65, 65)
				context.arc(60, 65, 5, 0, Math.PI * 2, true)
				context.moveTo(95, 65)
				context.arc(90, 65, 5, 0, Math.PI * 2, true)
				context.stroke()
				context.draw()
			},
			quadraticCurveTo: function() {
				context.beginPath()
				context.moveTo(20, 20)
				context.quadraticCurveTo(20, 100, 200, 20)
				context.stroke()
				context.draw()
			},
			bezierCurveTo: function() {
				context.beginPath()
				context.moveTo(20, 20)
				context.bezierCurveTo(20, 100, 200, 100, 200, 20)
				context.stroke()
				context.draw()
			},
			setFillStyle: function() {
				['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) {
					context.setFillStyle(item)
					context.beginPath()
					context.rect(0 + 75 * index, 0, 50, 50)
					context.fill()
				})
				context.draw()
			},
			setStrokeStyle: function() {
				['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) {
					context.setStrokeStyle(item)
					context.beginPath()
					context.rect(0 + 75 * index, 0, 50, 50)
					context.stroke()
				})
				context.draw()
			},
			setGlobalAlpha: function() {
				context.setFillStyle('#000000');
				[1, 0.5, 0.1].forEach(function(item, index) {
					context.setGlobalAlpha(item)
					context.beginPath()
					context.rect(0 + 75 * index, 0, 50, 50)
					context.fill()
				})
				context.draw()
				context.setGlobalAlpha(1)
			},
			setShadow: function() {
				context.beginPath()
				context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
				context.rect(10, 10, 100, 100)
				context.fill()
				context.draw()
			},
			setFontSize: function() {
				[10, 20, 30, 40].forEach(function(item, index) {
					context.setFontSize(item)
					context.fillText('Hello, world', 20, 20 + 40 * index)
				})
				context.draw()
			},
			setLineCap: function() {
				context.setLineWidth(10);
				['butt', 'round', 'square'].forEach(function(item, index) {
					context.beginPath()
					context.setLineCap(item)
					context.moveTo(20, 20 + 20 * index)
					context.lineTo(100, 20 + 20 * index)
					context.stroke()
				})
				context.draw()
			},
			setLineJoin: function() {
				context.setLineWidth(10);
				['bevel', 'round', 'miter'].forEach(function(item, index) {
					context.beginPath()
					context.setLineJoin(item)
					context.moveTo(20 + 80 * index, 20)
					context.lineTo(100 + 80 * index, 50)
					context.lineTo(20 + 80 * index, 100)
					context.stroke()
				})
				context.draw()
			},
			setLineWidth: function() {
				[2, 4, 6, 8, 10].forEach(function(item, index) {
					context.beginPath()
					context.setLineWidth(item)
					context.moveTo(20, 20 + 20 * index)
					context.lineTo(100, 20 + 20 * index)
					context.stroke()
				})
				context.draw()
			},
			setMiterLimit: function() {
				context.setLineWidth(4);
				[2, 4, 6, 8, 10].forEach(function(item, index) {
					context.beginPath()
					context.setMiterLimit(item)
					context.moveTo(20 + 80 * index, 20)
					context.lineTo(100 + 80 * index, 50)
					context.lineTo(20 + 80 * index, 100)
					context.stroke()
				})
				context.draw()
			}
		}
	}
</script>

<style>
	.canvas-element-wrapper {
		display: block;
		margin-bottom: 100rpx;
	}

	.canvas-element {
		width: 100%;
		height: 500rpx;
		background-color: #ffffff;
	}

	.canvas-buttons {
		padding: 30rpx 50rpx 10rpx;
		width: 100%;
		height: 360rpx;
		box-sizing: border-box;
	}

	.canvas-button {
		float: left;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		line-height: 1;
		width: 300rpx;
		margin: 15rpx 12rpx;
	}
</style>